微信小程序中使用ec-canvas，并模拟获取后端数据

ec-canvas的下载其他博主分享了很多，本文就暂不介绍，直接上正文

1、首先在index.wxml文件中添加一个盒子用于放置图表（本文展示折线图，其他图表类似操作）

//canvas-box需要设置宽高
<view class="canvas-box">
     <ec-canvas id="mychart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas>
 </view>

2、设置ehcarts的实例、ec的配置和需要展示的数据

let chart = null; //echarts实例

Page({
    ec: {
      lazyLoad: true //开启懒加载
    },
    xData:[],    //用于存放x轴的数据
    seriesData:[] //用于存放折线图的数据
}

3、在onLoad的时候去获取ec-canvas，并模拟获取后台接口返回数据

 onLoad(options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.getList()
  },

getList(){
    //模拟从后端获取数据，并赋值给xData 、seriesData 
    setTimeout(() => {
      const xData = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
      const seriesData = [0.5, 0.6, 0.5, 0.7, 0.5, 0.7]
      this.setData({xData,seriesData})
      this.initChart(); //初始化图表
    },500)
}

4、初始化图表

  //初始化echarts图表
  initChart() {
    //如果是二次赋值，就需要先清空，避免bug
    if(this.chart){
      chart.clear(); 
    }
    this.echartsComponnet.init((canvas, width, height,dpr) => {
      // 初始化图表
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr //清晰度 使canvas的图表更加清晰
      });
      chart.setOption(this.getOption())
      return chart;
    });
  },

//设置图表各项数据
  getOption() {
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { 
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        confine: true
      },
      grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: this.data.xData
      }],
      yAxis: [{
        type: 'value',

      }],
      series: [{
        data: this.data.seriesData,
        type: 'line'
      }]
    }
    return option;
  }

5、此时页面中图表已出现图表，如果页面上还需要点击更新视图，赋值改变后，调用一次initChart()方法即可。下课