小程序 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);