小程序在一個頁面運用多個echarts圖表

wxml中如下：

<view style="width:100%;height:350px">
   <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec1 }}"></ec-canvas>
</view>
<view style="width:100%;height:200px">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec2 }}"></ec-canvas>
</view>

wxss中如下：

ec-canvas {
    width: 100%;
    height: 100%;
}

js中如下：

//首先要引入ec-canvas

import * as echarts from '../../ec-canvas/echarts';
data:{
	ec1: {
      lazyLoad:true
    },
    ec2: {
      // 將 lazyLoad 設爲 true 後，需要手動初始化圖表
      lazyLoad:true
    },
}
//這個一定要提前獲取數據，不然會出現圖表空白的情況，我是在onLoad()裏面調用的
getDataToday: function(){
    //本日圖表數據
    var that = this;
    wx.showLoading({
        title: '加載中..',
        mask: true
    });
    wx.request({//請求今日圖表數據
        url: 'xxxxxxxxxx',
        data: {
          id:that.data.uid,
        },
        success: (res)=>{
          console.log(res);
          var option1 = {};
          var option2 = {};
          if(res.statusCode==200){
            console.log(res);
            var option1 = {
              title: {
                text: '',
                left: 'center'
              },
              color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
              legend: {
                data: ['A', 'B', 'C'],
                top: 50,
                left: 'center',
                backgroundColor: 'red',
                z: 100
              },
              grid: {
                containLabel: true
              },
              tooltip: {
                show: true,
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月','十月','十一月','十二月'],
                // show: false
              },
              yAxis: {
                x: 'center',
                type: 'value',
                splitLine: {
                  lineStyle: {
                    type: 'dashed'
                  }
                }
                // show: false
              },
              series: [{
                name: '',
                type: 'line',
                smooth: true,
                data: res.data.mdata
              }]
            };
            option2 = {//示例數據
              color: ['#c23531'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 座標軸指示器，座標軸觸發有效
                  type: 'line'        // 默認爲直線，可選爲：'line' | 'shadow'
                },
                confine: true
              },
              legend: {
                data: []
              },
              grid: {
                left: 20,
                right: 20,
                bottom: 15,
                top: 40,
                containLabel: true
              },
              xAxis: [
                {
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#999'
                    }
                  },
                  axisLabel: {
                    color: '#666'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'category',
                  axisTick: { show: false },
                  data: res.data.data.name,
                  axisLine: {
                    lineStyle: {
                      color: '#999'
                    }
                  },
                  axisLabel: {
                    color: '#666'
                  }
                }
              ],
              series: [
                {
                  name: '熱度',
                  type: 'bar',
                  label: {
                    normal: {
                      show: true,
                      position: 'inside'
                    }
                  },
                  data: res.data.data.value,
                  itemStyle: {
                    // emphasis: {
                    //   color: '#37a2da'
                    // }
                  }
                }
              ]
            };
          that.setData({
            todayData1:option1,
            todayData2:option2
          })
          wx.hideLoading()
        }
      }
    })
  },

//由於項目需求是：tab切換展示不同圖表，所以我把下面的代碼放到了點擊tab之後調用，不然就不會展示圖表。
that.ecComponent1  = that.selectComponent('#mychart-dom-line');
that.ecComponent2 = that.selectComponent('#mychart-dom-bar');
that.init_bar1();
that.init_bar2();

init_bar1: function (){
    this.ecComponent1 .init((canvas, width, height) => {
        // 初始化圖表
        const chart  = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        chart.setOption(this.data.todayData1);
        wx.hideLoading();
        // 注意這裏一定要返回 chart 實例，否則會影響事件處理等
        return chart;
    });
  },
init_bar2: function (){
    this.ecComponent2 .init((canvas, width, height) => {
        // 初始化圖表
        const chart  = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        chart.setOption(this.data.todayData2);
        wx.hideLoading();
        // 注意這裏一定要返回 chart 實例，否則會影響事件處理等
        return chart;
    });
  },

json如下：

{
    "navigationBarTitleText": "首頁",
    "usingComponents": {
        "ec-canvas": "../../ec-canvas/ec-canvas"
    }
}