wx-f2
图表库
在开发中使用图表库，推荐百度的 Echarts，和阿里出品的 AntV家族，其中移动端为 AntV-F2
这里antV-F2有现成的原生小程序使用教程（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相关的依赖插件，所以我们把小程序原生插件放在 ** “static” ** 文件夹中进行使用
注意：这里不能放在"src"目录下，防止被webpack工具打包
wx-f2中看 ff-canvas 源码可以看出. vue文件data内部的opts.onInit 是一个 function 不能被传递到组件上, 通过主动调用 ff-canvas组件 的 init 方法, 并且将initChart传入就即正常使用了
- 将wx-f2对应的导入项目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 的内容
navigationBarTitleText: '查看启动日志'
}
}
]
- vue文件中使用
** 注意：mpvue中使用必须以懒加载的形式使用，即主动触发渲染，否则会失败 **
<!-- 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 内部通过id找到该组件, 然后调用该组件的初始化方法
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失效，并未使用成功，后续待解决（touch事件绑定成功，但对应的图表效果没有）
-- LucaLJX: github:https://github.com/LucaLJX
