如果你用mpvue，而且还想用echarts，那么这个包你可以以来一下
https://github.com/F-loat/mpvue-echarts
考虑到多个页面都休要用，所以抽出来作为一个组件，总得来说根据官方的例子小改动了一下
vue文件
1 <template>
2 <div class="echarts-wrap">
3 <mpvue-echarts :echarts="echarts" :onInit="handleInit" canvasId="getCanvasId" ref="echarts" />
4 </div>
5 </template>
6
7 <script src="./control.js"></script>
8
9 <style scoped lang="stylus" src="./style.styl"></style>js文件
1 import echarts from 'echarts'
2 import mpvueEcharts from 'mpvue-echarts'
3 import { messageTip, wxHideLoading, wxLoading } from "../../utils/wxapi";
4
5 export default {
6 data () {
7 return {
8 echarts,
9 echartsArr: [],
10 }
11 },
12 watch: {
13 getOptions: { // 每次切换数据源，都需要重新渲染，所以用watch观察数据是否改变
14 handler (newValue, oldValue) {
15 let chart = this.echartsArr[this.getCanvasId]
16 if (newValue) {
17 this.initChart(newValue)
18 } else {
19 this.initChart(oldValue)
20 }
21 },
22 deep: true
23 }
24 },
25 props: [
26 'getOptions',
27 'getCanvasId'
28 ],
29 computed: {},
30 methods: {
31 initChart (value) {
32 let _this = this
33 // wxLoading('加载中')
34 // this.clickFlag = false
35 setTimeout(() => { // 渲染需要延时执行，不要问为什么
36 // _this.$refs.echarts.clear()
37 _this.getOptions = value
38 _this.$refs.echarts.init()
39 wxHideLoading()
40 }, 200)
41
42 },
43
44 handleInit(canvas, width, height) {
45 let chart = echarts.init(canvas, null, {
46 width: width,
47 height: height
48 })
49 canvas.setChart(chart)
50 chart.clear() // 防止重复渲染，所以在构建之前，清空一下
51 chart.setOption(this.getOptions, true) // 重新构建数据源
52 this.echartsArr[this.getCanvasId] = chart
53 return chart
54 }
55 },
56 components: {
57 mpvueEcharts
58 },
59 onLoad () {
60 },
61 onShow () {
62 },
63 onHide () {
64 },
65 onUnload () {
66 }
67 }css文件没什么好说的
然后在主页面调用该组件
1 mpvue-echarts(:getOptions="wxOptions" :getCanvasId="canvasId") 在control.js中调用选项卡切换方法
1 /**
2 * 延时切换数据
3 */
4 changeData(index) {
5 switch (index) {
6 case 0:
7 this.canvasId = 'line'
8 this.wxOptions = this.ecDay
9 break
10 case 1:
11 this.canvasId = 'bar'
12 this.wxOptions = this.ec
13 break
14 }
15 },
