【mpvue】实现echarts图表动态加载数据

功能描述

使用mpvue框架开发微信小程序。目的效果为小程序中显示一个折线图，当点击切换按钮时，切换图表。

实现步骤

1.查询mpvue官方文档关于echarts的实现方式------静态加载图表，只加载一次

参考官方文档：在mpvue中使用echarts小程序组件

2.实现动态加载图表（能够根据需求多次绘制图表）

思路：每次获取到option（图表数据）的时候就重新绘制一次图表。

实现方法：echarts在此处的使用是以自定义组件的方式来使用的。微信小程序的官方文档中关于自定义组件的介绍中，observer 表示属性值被更改时的响应函数。则在ec-canvas.js中加入该属性，用于判断option（图表数据）更改，重新绘制图表

代码

源码

my-echarts-demo\src\pages\bar\index.vue

my-echarts-demo\src\component\wx-echarts.vue

my-echarts-demo\static\ec-canvas\ec-canvas.js

...
ec: {
      type: Object,
      observer: function () {
        this.init()
      }
    }
...

最终效果