本文主要介紹從原生小程序如何引入echarts，文章末尾會給出原生小程序引入echarts的倉庫地址和uniapp引入echarts的倉庫地址。

正常情況下，例如在web端，直接做法是npm install echarts --save 。 不過在小程序中直接安裝的話，會導致編譯后代碼包過大的問題，因此，我們可以使用echart的壓縮版本， echart.min.js。將這個文件放在ec-canvas文件夾下。或者去文末的倉庫地址去查看。

1. ec-canvas.js 值得一提的是，一般繪制圖表的數(shù)據(jù)都是服務器返回的，因此lazyLoad這個屬性默認為true，意思為當拿到數(shù)據(jù)之后再進行圖表的初始化。

我們會發(fā)現(xiàn)這個文件中引入一個WxCanvas，這是一個用于繪制canvas的封裝工具。

// ec-canvas.js
import WxCanvas from './wx-canvas';
import * as echarts from './echart';
let ctx;

Component({
  properties: {
    canvasId: {
      type: String,
      value: 'ec-canvas'
    },
    lazyLoad: {
      type: Boolean,
      value: false
    },
    disableTouch: {
      type: Boolean,
      value: false
    },
    throttleTouch: {
      type: Boolean,
      value: false
    }
  },
  ready: function() {
    if (!this.lazyLoad) this.init();
  },
  methods: {
    init: function (callback) {
      ctx = wx.createCanvasContext(this.data.canvasId, this);

      const canvas = new WxCanvas(ctx, this.data.canvasId);

      echarts.setCanvasCreator(() => {
        return canvas;
      });

      var query = wx.createSelectorQuery().in(this);
      query.select('.ec-canvas').boundingClientRect(res => {
        if (typeof callback === 'function') {
          this.chart = callback(canvas, res.width, res.height);
        }
        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
          this.chart = this.data.ec.onInit(canvas, res.width, res.height);
        }
        else {
          this.triggerEvent('onInit', {
            canvas: canvas,
            width: res.width,
            height: res.height
          });
        }
      }).exec();
    },

    canvasToTempFilePath(opt) {
      if (!opt.canvasId) {
        opt.canvasId = this.data.canvasId;
      }

      ctx.draw(true, () => {
        wx.canvasToTempFilePath(opt, this);
      });
    },

    touchStart(e) {
      if (this.chart && e.touches.length > 0) {
        var touch = e.touches[0];
        var handler = this.chart.getZr().handler;
        handler.dispatch('mousedown', {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.processGesture(wrapTouch(e), 'start');
      }
    },

    touchMove(e) {
      if (this.chart && e.touches.length > 0) {
        var touch = e.touches[0];
        var handler = this.chart.getZr().handler;
        handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.processGesture(wrapTouch(e), 'change');
      }
    },

    touchEnd(e) {
      if (this.chart) {
        const touch = e.changedTouches ? e.changedTouches[0] : {};
        var handler = this.chart.getZr().handler;
        handler.dispatch('mouseup', {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.dispatch('click', {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.processGesture(wrapTouch(e), 'end');
      }
    }
  }
})
復制代碼

// wx-canvas.js
export default class WxCanvas {
  constructor(ctx, canvasId) {
    this.ctx = ctx;
    this.canvasId = canvasId;
    this.chart = null;

    WxCanvas.initStyle(ctx);
    this.initEvent();
  }

  getContext(contextType) {
    return contextType === '2d' ? this.ctx : null;
  }

  setChart(chart) {
    this.chart = chart;
  }

  attachEvent () {
    // noop
  }

  detachEvent() {
    // noop
  }

  static initStyle(ctx) {
    const styles = [
      'fillStyle',
      'strokeStyle',
      'globalAlpha',
      'textAlign',
      'textBaseAlign',
      'shadow',
      'lineWidth',
      'lineCap',
      'lineJoin',
      'lineDash',
      'miterLimit',
      'fontSize'
    ]

    styles.forEach((style) => {
      Object.defineProperty(ctx, style, {
        set: (value) => {
          if ((style !== 'fillStyle' && style !== 'strokeStyle')
            || (value !== 'none' && value !== null)
          ) {
            ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value);
          }
        },
      });
    });

    ctx.createRadialGradient = () => 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.mp.touches[0];
        this.chart._zr.handler.dispatch(name.ecName, {
          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
          zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
        });
      };
    });
  }
}
復制代碼

2. ec-canvas.wxml

<block wx:if="{{ canvasId }}">
  <canvas
    class="ec-canvas"
    id="{{ canvasId }}"
    canvasId="{{ canvasId }}"
    bindtouchstart="touchStart"
    bindtouchmove="touchMove"
    bindtouchend="touchEnd"
    binderror="error"
  ></canvas>
</block>
復制代碼

3. ec-canvas.json 和 ec-canvas.wxss

{
  "component": true,
  "usingComponents": {}
}
復制代碼

.ec-canvas {
  width: 100%;
  height: 100%;
  flex: 1;
}
復制代碼

第三歩：在頁面中引入chart組件

1. index.js

// index.js
import * as echarts from '../../ec-canvas/echart';

Page({
  data: {
  },
  onLoad: function () {
    this.initChart()
  },

  // 初始化圖表
  initChart() {
    const chartComponent = this.selectComponent('#chart')
    chartComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width,
        height
      })
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['開單金額'],
          textStyle: {
            fontSize: 12,
            color: '#999999'
          }
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: "15%",
          containLabel: true
        },
        color: ['#87E7FF'],
        xAxis: {
          type: 'category',
          data: ['2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24'],
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#999999'
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            inside: true
          },
          scale: true,
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#999999'
            },
            margin: 5,
            formatter: function (value) {
              if (value >= 1000) {
                value = http://www.wxapp-union.com/value / 1000 + "k";
              }
      
              return value;
            }
          }
        },
        series: [{
          name: '金額',
          stack: '-',
          type: 'bar',
          data: [ 572011, 2204, 44337, 62701, 106909, 44410, 146850],
          value: [ 572011, 2204, 44337, 62701, 106909, 44410, 146850]
        }]
      };
      chart.setOption(option)
      return chart
    })
  }
})
復制代碼

2. index.wxml

<view class="container">
  <view class="ec">
    <ec-canvas id="chart" lazyLoad="{{ true }}"></ec-canvas>
  </view>
</view>
復制代碼

最后一步

此時如果發(fā)現(xiàn)頁面上并沒有圖表，控制臺也沒有任何的報錯，那么就很有可能忘記了一個關鍵環(huán)節(jié)：為ec-canvas組件添加父級元素，并設置寬高。

.ec {
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
}
復制代碼

Uniapp中引入echarts與原生很類似，實現(xiàn)的原理也相同。有需要的小伙伴可以去倉庫里自取。