小程序 ec-canvas 组件封装

ec-canvas: https://github.com/ecomfe/echarts-for-weixin

微信小程序通过ec-canvas实现数据可视化。

需求：当前页面需要渲染多个图表

问题：二次封装ec-canvas时，由于组件this指向问题导致图表覆盖

解决： 将每一个ec对象挂载到app()全局。

代码示例：

<!-- 可动态生成 wxml -->
<ec-canvas id="{{ canvasId }}" canvas-id="{{ canvasId }}" ec="{{ canvas1}}" wx:if="{{ type ==='canvas1' }}"></ec-canvas> 

js data

canvas1: {
      onInit: (canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chart);
        app.canvas1= chart
        return chart;
      }

图标数据更新　

app.temperature.setOption(option);