Taro引入echarts【兼容多端小程序（飞书/微信/支付宝小程序）】

近期接到公司新需求，开发飞书小程序，并且原型中含有大量的图表，本想使用飞书内置图表组件 ——

chart-space，但官方表示已经停止维护了，无奈之下，只能另寻他路，于是乎，图表之王（文档最完整，api最透彻，社区最活跃）echarts映入我脑海中，决定就是你了！

下载echarts代码

进入echarts下载地址，点击在线定制

勾选你需要的图表和组件，点击下载

echarts引入项目

在开发项目中，components中创建Echarts文件，放入下载后的js包，并在该目录下创建wx-canvas.js，编写canvas构造函数代码，如下

export default class WxCanvas {
  constructor(ctx, canvasId, isNew, canvasNode) {
    this.ctx = ctx;
    this.canvasId = canvasId;
    this.chart = null;
    this.isNew = isNew
    if (isNew) {
      this.canvasNode = canvasNode;
    }
    else {
      this._initStyle(ctx);
    }
    // this._initCanvas(zrender, ctx);
    this._initEvent();
  }
  getContext(contextType) {
    if (contextType === '2d') {
      return this.ctx;
    }
  }
  // canvasToTempFilePath(opt) {
  //   if (!opt.canvasId) {
  //     opt.canvasId = this.canvasId;
  //   }
  //   return wx.canvasToTempFilePath(opt, this);
  // }
  setChart(chart) {
    this.chart = chart;
  }
  addEventListener() {
    // noop
  }
  attachEvent() {
    // noop
  }
  detachEvent() {
    // noop
  }
  _initCanvas(zrender, ctx) {
    zrender.util.getContext = function () {
      return ctx;
    };
    zrender.util.$override('measureText', function (text, font) {
      ctx.font = font || '12px sans-serif';
      return ctx.measureText(text);
    });
  }
  _initStyle(ctx) {
    ctx.createRadialGradient = () => {
      return ctx.createCircularGradient(arguments);
    };
  }
  _initEvent() {
    this.event = {};
    const eventNames = [{
      wxName: 'touchStart',
      ecName: 'mousedown'
    }, {
      wxName: 'touchMove',
      ecName: 'mousemove'
    }, {
      wxName: 'touchEnd',
      ecName: 'mouseup'
    }, {
      wxName: 'touchEnd',
      ecName: 'click'
    }];
    eventNames.forEach(name => {
      this.event[name.wxName] = e => {
        const touch = e.touches[0];
        this.chart.getZr().handler.dispatch(name.ecName, {
          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
          zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
          preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {}
        });
      };
    });
  }
  set width(w) {
    if (this.canvasNode) this.canvasNode.width = w
  }
  set height(h) {
    if (this.canvasNode) this.canvasNode.height = h
  }
  get width() {
    if (this.canvasNode)
      return this.canvasNode.width
    return 0
  }
  get height() {
    if (this.canvasNode)
      return this.canvasNode.height
    return 0
  }
}

目录结构如下图

在Echarts文件中，创建ec-canvas.vue文件，创建canvas对象

二次封装echarts组件

使用创建的echart组件，稍微进行二次封装，大佬可以用自己的方法封装更好的，我的思路是，页面只要给echarts传入不同option，就可以进行渲染，代码如下：

// eChart.vue

使用echarts组件渲染页面

最后，需要进行各种各样的渲染与修改，可直接参看echarts官网

希望此文对大家有帮助，也请大佬不吝赐教～