ECharts官方维护的一个开源项目，提供了一个微信小程序组件（Component），我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表，非常方便好用。

一、安装

随此篇文章有这个组件源码，大家可点击下载。下载后解压缩，把压缩后的文件夹复制到components目录下，如下图：

二、使用

假定使用此组件来绘制图表的页面为interact，如下：

• interact.json文件，要添加的代码

"usingComponents": {"ec-canvas":"../../components/ec-canvas/ec-canvas"},

• interact.wxss文件，要添加的代码

.wx-canvas {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

• interact.wxml文件，要添加的代码

• interact.js文件，要添加的代码

首先，先引入组件：

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

其次，在初始化数据中，定义数据：

data: {
    chartBar: {
      onInit: ''
    },
    chartData:{
      title: { 
        text: "近7日文章阅读趋势图",
        textStyle:{color:'#222',fontWeight:'bold',fontSize:14} 
      },
      xAxis: {
        type: 'category',
        data: ['前五', '前四', '前三', '前二', '前天', '昨天', '今天']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [110, 180, 150, 80, 70, 110, 130],
          type: 'bar',
          color: '#ff6968'
      }]
    }
  },

再次，定义自定义方法：

   //获取图表
   getChart(){
    var that = this;
    var chartBar = 'chartBar.onInit';
    that.setData({
        [chartBar]: that.initCharts,
    });
  },
   
   //初始化图表
   initCharts(canvas, width, height) {
    var chartData = this.data.chartData;
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(chart);
    var option=chartData
    chart.setOption(option);
    return chart;
   },

最后，把获取图表放到页面加载方法中执行：

onLoad: function (options) {
    const res = wx.getMenuButtonBoundingClientRect();
    this.setData({
      menuBtn: res,
    });

    this.getChart();
  },

注：原文发表于码嗨路书网站，点击 这里 查看原文。