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

如果你用mpvue，而且还想用echarts，那么这个包你可以以来一下

https://github.com/F-loat/mpvue-echarts

考虑到多个页面都休要用，所以抽出来作为一个组件，总得来说根据官方的例子小改动了一下

vue文件

 <template>
   <div class="echarts-wrap">
     <mpvue-echarts :echarts="echarts" :onInit="handleInit" canvasId="getCanvasId" ref="echarts" />
   </div>
 </template>

 <script src="./control.js"></script>

 <style scoped lang="stylus" src="./style.styl"></style>

js文件

 import echarts from 'echarts'
 import mpvueEcharts from 'mpvue-echarts'
 import { messageTip, wxHideLoading, wxLoading } from "../../utils/wxapi";

 export default {
   data () {
     return {
       echarts,
       echartsArr: [],
     }
   },
   watch: {
     getOptions: { // 每次切换数据源，都需要重新渲染，所以用watch观察数据是否改变
       handler (newValue, oldValue) {
         let chart = this.echartsArr[this.getCanvasId]
         if (newValue) {
           this.initChart(newValue)
         } else {
           this.initChart(oldValue)
         }
       },
       deep: true
     }
   },
   props: [
     'getOptions',
     'getCanvasId'
   ],
   computed: {},
   methods: {
     initChart (value) {
       let _this = this
       // wxLoading('加载中')
       // this.clickFlag = false
       setTimeout(() => { // 渲染需要延时执行，不要问为什么
         // _this.$refs.echarts.clear()
         _this.getOptions = value
         _this.$refs.echarts.init()
         wxHideLoading()
       }, 200)

     },

     handleInit(canvas, width, height) {
       let chart = echarts.init(canvas, null, {
         width: width,
         height: height
       })
       canvas.setChart(chart)
       chart.clear() // 防止重复渲染，所以在构建之前，清空一下
       chart.setOption(this.getOptions, true) // 重新构建数据源
       this.echartsArr[this.getCanvasId] = chart
       return chart
     }
   },
   components: {
     mpvueEcharts
   },
   onLoad () {
   },
   onShow () {
   },
   onHide () {
   },
   onUnload () {
   }
 }

css文件没什么好说的

然后在主页面调用该组件

 1 mpvue-echarts(:getOptions="wxOptions" :getCanvasId="canvasId") 

在control.js中调用选项卡切换方法

  /**
      * 延时切换数据
      */
     changeData(index) {
       switch (index) {
         case 0:
           this.canvasId = 'line'
           this.wxOptions = this.ecDay
           break
         case 1:
           this.canvasId = 'bar'
           this.wxOptions = this.ec
           break
       }
     },