微信小程序中echarts动态加载数据

前期准备

需求：需要在微信小程序中动态显示图表。

经查询，选择使用echarts插件。

在echarts官网中获取ec-canvas组件，放入至微信小程序中

wxml

<ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>

js

import * as echarts from '../../../utils/ec-canvas/echarts'; //引入echarts.js
var dataList = [];
Page({
	/**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
  }
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.getData(); //获取数据
  },
  getData: function () {
  	/**
  	 * 此处的操作：
  	 * 获取数据json
  	 */
  	wx.request({
  	  url: url, //仅为示例，并非真实的接口地址
      data: data,
      method: 'POST',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      success: (res) => {
      	dataList = res.data;
  		this.init_echarts();//初始化图表
      }
	});
  },
  //初始化图表
  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  getOption: function () {
    //时间显示范围
    var anchor = [
      { name: weekDate, value: [weekDate, 0] },  // 开始
      { name: nowDate, value: [nowDate, 0] }  // 结束
    ];
    // 指定图表的配置项和数据
    var option = {
    	xAxis: {
	        type: 'category',
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [{
	        data: dataList,
	        type: 'line'
	    }]
    }
    return option;
  },

})