echarts小程序异步加载

    如何实现异步加载？
    第一步：创建option 方法 设置好样式后 返回option，异步的值可以通过传参的方法传入option。

  

第二步：向后段请求数据，当请求完毕后用setData方法保存数据

// 折线图图表
let tableChart = null;//在page外定义一个全局的变量
  getData () {
    this.data.timeList = [];
    this.data.valueList = [];
    wx.request({
      url: 'URL',
      data: '',
      success: (res) => {
        this.setData({
          valueList: res.valueList,
          timeList:res.timeList
        });
        this.tabelFrist();
      }
    });
  },

第三步：调用实例化echarts

tabelFrist () {
    this.chart = this.selectComponent('#mychart-dom-line'); // 去获取echarts  这里的id就是html中echarts的id
    this.chart.init((canvas, width, height, dpr) => {
    // 初始化图表
      tableChart = echarts.init(canvas, null, { // echarts会继承父元素的宽高
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
      });
      this.clearOption();
      return tableChart; // 一定要return出去
    });
  },

第四步：实例化完成后，为了现实正常，添加了 

tableChart.clear（）清除上一次加载的值，会不会闪屏这里很重要 其实如果用户闲着没事做，一直狂点就会出现闪屏现象。这里的clear() 是一个重点。如果想防止用户暴力浏览，建议使用节流或者防抖控制用户点击频率，相关详细教程很快就出。

 clearOption () {
    tableChart.clear();
    tableChart.setOption(getTableOption(this.data.valueList, this.data.timeList));
  },

到这里已经能够实现异步加载数据了，在加一点， 

 不要忘记导入，echarts 。整个echarts导入方法 在这！！！！https://blog.csdn.net/weixin_45885731/article/details/118604567

import * as echarts from '../../../assets/ec-canvas/echarts';

json文件不要忘记引入这个。

    "ec-canvas": "../../../../financeSection/assets/ec-canvas/ec-canvas"