考虑到多个页面都休要用,所以抽出来作为一个组件,总得来说根据官方的例子小改动了一下
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 },