小程式中使用ECharts 非同步載入資料

官網例子都是同步的，怎麼引入及同步demo請移步官網

<view class="container">
  <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas>
  <ec-canvas id="mychart-dom-multi-scatter" canvas-id="mychart-multi-scatter" ec="{{ ecScatter }}"></ec-canvas>
</view>

import * as echarts from `../../ec-canvas/echarts`;

Page({
  data: {
    ecBar: {
      lazyLoad: true // 延遲載入
    },

    ecScatter: {
      lazyLoad: true 
    }
  },
  onLoad(){
    this.barComponent = this.selectComponent(`#mychart-dom-multi-bar`);
    this.scaComponnet = this.selectComponent(`#mychart-dom-multi-scatter`);
    this.init_bar();
    this.init_sca();
  },
  init_bar: function (){
    this.barComponent.init((canvas, width, height) => {
      // 初始化圖表
      const barChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      barChart.setOption(this.getBarOption());
      // 注意這裡一定要返回 chart 例項，否則會影響事件處理等
      return barChart;
    });
  },
  init_sca: function () {
    this.scaComponnet.init((canvas, width, height) => {
      // 初始化圖表
      const scaChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      scaChart.setOption(this.getScaOption());
      // 注意這裡一定要返回 chart 例項，否則會影響事件處理等
      return scaChart;
    });
  },
  getBarOption:function(){
    //return 請求資料
    return {
      color: [`#37a2da`, `#32c5e9`, `#67e0e3`],
      tooltip: {
        trigger: `axis`,
        axisPointer: {            // 座標軸指示器，座標軸觸發有效
          type: `shadow`        // 預設為直線，可選為：`line` | `shadow`
        }
      },
      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: [`汽車之家`, `今日頭條`, `百度貼吧`, `一點資訊`, `微信`, `微博`, `知乎`],
          axisLine: {
            lineStyle: {
              color: `#999`
            }
          },
          axisLabel: {
            color: `#666`
          }
        }
      ],
      series: [
        {
          name: `熱度`,
          type: `bar`,
          label: {
            normal: {
              show: true,
              position: `inside`
            }
          },
          data: [300, 270, 340, 344, 300, 320, 310]
        },
        {
          name: `正面`,
          type: `bar`,
          stack: `總量`,
          label: {
            normal: {
              show: true
            }
          },
          data: [120, 102, 141, 174, 190, 250, 220]
        },
        {
          name: `負面`,
          type: `bar`,
          stack: `總量`,
          label: {
            normal: {
              show: true,
              position: `left`
            }
          },
          data: [-20, -32, -21, -34, -90, -130, -110]
        }
      ]
    };
  },
  getScaOption:function(){
    //請求資料 
    var data = [];
    var data2 = [];

    for (var i = 0; i < 10; i++) {
      data.push(
        [
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 40)
        ]
      );
      data2.push(
        [
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100),
          Math.round(Math.random() * 100)
        ]
      );
    }

    var axisCommon = {
      axisLabel: {
        textStyle: {
          color: `#C8C8C8`
        }
      },
      axisTick: {
        lineStyle: {
          color: `#fff`
        }
      },
      axisLine: {
        lineStyle: {
          color: `#C8C8C8`
        }
      },
      splitLine: {
        lineStyle: {
          color: `#C8C8C8`,
          type: `solid`
        }
      }
    };

    return {
      color: ["#FF7070", "#60B6E3"],
      backgroundColor: `#eee`,
      xAxis: axisCommon,
      yAxis: axisCommon,
      legend: {
        data: [`aaaa`, `bbbb`]
      },
      visualMap: {
        show: false,
        max: 100,
        inRange: {
          symbolSize: [20, 70]
        }
      },
      series: [{
        type: `scatter`,
        name: `aaaa`,
        data: data
      },
      {
        name: `bbbb`,
        type: `scatter`,
        data: data2
      }
      ],
      animationDelay: function (idx) {
        return idx * 50;
      },
      animationEasing: `elasticOut`
    };
  },
});

注意：非同步載入時，ec-canvas標籤載入顯示要先於this.scaComponnet.init，否則會報錯。