wx-f2
圖表庫
在開發(fā)中使用圖表庫芙粱，推薦百度的 Echarts背率，和阿里出品的 AntV家族娜膘，其中移動端為 AntV-F2
這里antV-F2有現(xiàn)成的原生小程序使用教程（wx-f2：wx-f2）硼瓣，就不做贅述瞳抓，只講解如何在mpvue框架中使用刺啦。
mpvue框架中使用 Echarts
參考文檔： mpvue-echarts
- 安裝 mpvue-echarts 及 echarts 插件
## mpvue-echarts
npm i mpvue-echarts --save
## echarts
npm i echarts --save
- vue文件中以組件的形式使用
<template>
<div class="echarts-wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
</div>
</template>
<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
let chart = null;
function initChart(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {}; // ECharts 配置項
chart.setOption(option);
return chart; // 返回 chart 后可以自動綁定觸摸操作
}
export default {
components: {
mpvueEcharts
},
data () {
return {
echarts,
onInit: initChart
}
}
}
</script>
<style scoped>
.echarts-wrap {
width: 100%;
height: 300px;
}
</style>
mpvue框架中使用antV-F2
antV-F2官方給出了小程序原生的使用方式留特，并無vue相關(guān)的依賴插件，所以我們把小程序原生插件放在 ** “static” ** 文件夾中進行使用
注意：這里不能放在"src"目錄下玛瘸，防止被webpack工具打包
wx-f2中看 ff-canvas 源碼可以看出. vue文件data內(nèi)部的opts.onInit 是一個 function 不能被傳遞到組件上, 通過主動調(diào)用 ff-canvas組件 的 init 方法, 并且將initChart傳入就即正常使用了
- 將wx-f2對應(yīng)的導(dǎo)入項目static文件夾中
static文件夾
- 項目src目錄下pages.js以小程序的方式引入wx-f2組件配置
module.exports = [
{
path: 'pages/testF2/index', // 頁面路徑蜕青，同時是 vue 文件相對于 src 的路徑
config: {
// 引入使用wx-f2組件
usingComponents: {
'ff-canvas': '/static/libs/f2-canvas/f2-canvas'
}
}
},
{
path: 'packageA/logs',
subPackage: true,
config: { // 頁面配置，即 page.json 的內(nèi)容
navigationBarTitleText: '查看啟動日志'
}
}
]
- vue文件中使用
** 注意：mpvue中使用必須以懶加載的形式使用糊渊，即主動觸發(fā)渲染右核，否則會失敗 **
<!-- demo -->
<template>
<div style="height: 100vh">
<!-- opts 前面加冒號 -->
<ff-canvas id="column" canvas-id="column" :opts="opts" />
</div>
</template>
<script>
// 這里注意路徑，要引入 static 文件夾中的f2.js文件
import F2 from "../../../static/f2-canvas/lib/f2";
let chart = null;
function initChart(canvas, width, height) {
// 使用 F2 繪制圖表
const data = [{
year: "1951 年",
sales: 38
},
{
year: "1952 年",
sales: 52
},
{
year: "1956 年",
sales: 61
},
{
year: "1957 年",
sales: 145
},
{
year: "1958 年",
sales: 48
},
{
year: "1959 年",
sales: 38
},
{
year: "1960 年",
sales: 38
},
{
year: "1962 年",
sales: 38
}
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data, {
sales: {
tickCount: 5
}
});
chart.tooltip({
showItemMarker: false,
onShow(ev) {
const {
items
} = ev;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = "￥ " + items[0].value;
}
});
chart.interval().position("year*sales");
chart.render();
return chart;
}
export default {
data() {
return {
motto: "Hello World",
opts: {
// 使用延時初始化 -- 重要
lazyLoad: true
}
};
},
components: {},
methods: {
},
onLoad() {
// 在 onLoad 內(nèi)部通過id找到該組件, 然后調(diào)用該組件的初始化方法
this.$mp.page.selectComponent('#column').init(initChart)
}
};
</script>
<style scoped>
</style>
注意：
建議 ‘ this.$mp.page.selectComponent('#column').init(initChart) ’ 這行代碼寫在vue生命周期mounted里面渺绒，而不是小程序onLoad里面贺喝，因為vue頁面加載在小程序后面
wx-f2中的tooltip失效，并未使用成功芒篷，后續(xù)待解決（touch事件綁定成功搜变，但對應(yīng)的圖表效果沒有）
-- LucaLJX: github:https://github.com/LucaLJX
