小程序mpvue中动态切换echarts图表

如果你用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     },

 



posted @ 2019-08-08 15:17  rookieM  阅读(1520)  评论(0)  编辑  收藏  举报