最近在写微信小程序遇到了图表相关的问题，项目要求是要用柱状图，同时由于数据较多，需要将一组数据用多个图表表示，而且还要实现动态刷新数据。
关于echarts的下载和引入不多加介绍。

效果图

这里只取一部分数据做展示

JS部分

定义全局变量

import * as echarts from '../../utils/ec-canvas/echarts'; //引入echarts.js
var dataList = [];
var EqpList=[];
var Chart1=null;
var Chart2=null;
var eqp1=[];
var eqp2=[];
var option1={};
var option2={};

data部分的定义

data: {
    ec1: {
      lazyLoad: true // 延迟加载
    },
    ec2:{
      lazyLoad:true
    },
    _index:0,//下标
  },

onLoad部分

onLoad: function (options) {
    //_index=0;
    this.echartsComponnet1 = this.selectComponent('#mychart1');
    this.echartsComponnet2 = this.selectComponent('#mychart2');
    this.getData(); //获取数据
  },

onLoad首先调用getData函数来获得要展示的数据

getData: function () {
    var index=this.data._index;
  	wx.request({
  	  url: url, 
      method: 'GET',
      header: { 'content-type': 'application/json' },
      success: (res) => {
        console.log(res.data);
        EqpList=res.data.data.eqpList;
        dataList=res.data.data.eqpList[index].slaveData; 
        //将request到的数据分成两份，eqp1和eqp2
        for(var i=0;i<dataList.length/2;i++){
          eqp1[i]=dataList[i];
        }
        var j=0;
        for(var i=dataList.length-1;i>=dataList.length/2&&j<dataList.length/2;i--,j++){
          eqp2[j]=dataList[i];
        }
        console.log('eqp1:',eqp1);
        console.log('eqp2:',eqp2);
        console.log('dataList:',dataList);
        //第一张图表
        option1 = {
          canvasId: 'columnCanvas',
          type: 'column',
            xAxis: {
              data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20'],
              disableGrid: true,
              axisLabel: {  
                interval: 0,  
                formatter:function(value)  
                {  
                    return value.split("").join("\n");  
                }  
            }  
            },
            yAxis: {
              disableGrid: false,
              gridColor: "#ffffff",
              fontColor: "#ffffff",
              min: 0,
              max: 600,
              disabled: true,
              fontColor: "#ff6700"
            },
            series: [{
              data: eqp1,//这里的data是要展示的数据
              type: 'bar',
              color: "rgba(255,90,87,1)"
            }],
            extra: {
              column: {
                  width: 1//x轴的宽度
              }
          }
        };
        //第二张图
        option2 = {
          canvasId: 'columnCanvas',
          type: 'column',
            xAxis: {
              data: ['21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40'],
              disableGrid: true,
              axisLabel: {  
                interval: 0,  
                formatter:function(value)  
                {  
                    return value.split("").join("\n");  
                }  
            }  
            },
            yAxis: {
              disableGrid: false,
              gridColor: "#ffffff",
              fontColor: "#ffffff",
              min: 0,
              max: 600,
              disabled: true,
              fontColor: "#ff6700"
            },
            series: [{
              data:eqp2,
              type: 'bar',
              color: "rgba(255,90,87,1)"
            }],
            extra: {
              column: {
                  width: 1
              }
          }
        };
        /*
			如果直接用setOption(Chart)的话，
			可能会在切换页面时出现数据更新不及时的现象。
			这是因为每次切换界面时，
			都会创建echarts实例，但是上一个实例未销毁。
			更改为只创建一个echarts实例，每次切换数据时，
			只重新setOption，并在此操作前clear图表。
		*/
        if(!Chart1&&!Chart2){
          this.init_echarts1();//初始化图表
          this.init_echarts2();
        }
        else{
          this.setOption(Chart1);//更新数据
          this.setOption(Chart2);
        }
        eqp1=[];
        eqp2=[];
      }
	});
  },

如果直接用setOption(Chart)的话，可能会在切换页面时出现数据更新不及时的现象。这是因为每次切换界面时，都会创建echarts实例，但是上一个实例未销毁。更改为只创建一个echarts实例，每次切换数据时，只重新setOption，并在此操作前clear图表。

如果之前没有创建echarts实例的话，需要初始化图表，调用init_echarts()函数。

init_echarts1: function () {
    this.echartsComponnet1.init((canvas, width, height) => {
      Chart1 = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart1.setOption(option1);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart1;
    });
  },
  init_echarts2: function () {
    this.echartsComponnet1.init((canvas, width, height) => {
      Chart1 = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart1.setOption(option2);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart2;
    });
  },

最后是setOption函数，用来清除并获取新数据。

setOption: function (Chart) {
    Chart.clear();  // 清除
    //避免写两个类似的函数
    if(Chart==Chart1||Chart==option1)
      Chart.setOption(option1);  //获取新数据
    else
      Chart.setOption(option2);
  },

JSON部分

一定不要忘记json部分，不然会无法显示图表。

{
  "usingComponents": {
    "ec-canvas": "../../utils/ec-canvas/ec-canvas"
    }
}

wxml部分

<view>
    <ec-canvas id="mychart1" canvas-id="mychart-line" ec="{{ ec1 }}"></ec-canvas>
  </view>
  <view>
    <ec-canvas id="mychart2" canvas-id="mychart-bar" ec="{{ ec2 }}"></ec-canvas>
  </view>

wxss部分

ec-canvas {
  width: 100%;
  height: 100%;
}
#mychart1 {
  position: absolute; 
  top: 10rpx;
  height: 45%;
  left: 0;
  right: 0;
}
#mychart2 {
  position: absolute; 
  top: 400rpx;
  height: 50%;
  left: 0;
  right: 0;
}