小程序开发 加载Echarts图表（touchWX载入）

小程序蛮火的 咱也搞一个

echarts加载稍微复杂一点 这里写一下我的经验

小程序和百度echarts一起做了这个小程序版的echarts，官方有示例，也有好多博客写了，这里放 一个之前看过的

touchWX

简单说下我用了touchWX的感受

• 单文件的开发方式，真正的比小程序那一个页面4个文件不知道爽多少倍，再也不用写一个页面开4个窗口了
• 实时编辑预览 保存了就会自动执行，编译成小程序格式的文件
• 丰富的组件，其实没用上多少。个性化的项目，能照搬的没多少，也就定位/提示用用

echarts加载

话不多说，进入正题，怎么在touchWX中用上echarts？

官方给的是4文件的小程序组件，而touchWX的组件是单文件.wxc，在编译的时候再转成4个文件，所以要把官方的整合起来，方便直接编译调用。

在调用echarts组件的时候还会调用两个核心js echarts.js和wx-canvas.js,所以把这两个拷贝到package下的ec-canvas文件夹里，然后新建一个index.wxc(touchWX的组件方法)，再把echaert官方组件整合到index.wxc中

结构如下

index.wxc代码如下

<template>
    <canvas class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}">
    canvas>
template>
<script>
import WxCanvas from './wx-canvas';
import * as echarts from './echarts';

let ctx;
    export default {
        data: {
            "usingComponents": {}
        },
        properties: {
            canvasId: {
                type: String,
                value: 'ec-canvas'
            },
            ec: {
                type: Object
            }
        },
        data: {},
        ready: function () {
            if (!this.data.ec) {
                console.warn('组件需绑定 ec 变量，例：
                    + 'canvas-id="mychart-bar" ec="{{ ec }}">');
                return;
            }
            if (!this.data.ec.lazyLoad) {
                this.init();
            }
        },
        methods: {
            init: function (callback) {
                const version = wx.version.version.split('.').map(n => parseInt(n, 10));
                const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
                    || (version[0] === 1 && version[1] === 9 && version[2] >= 91);
                if (!isValid) {
                    console.error('微信基础库版本过低，需大于等于 1.9.91。'
                        + '参见：https://github.com/ecomfe/echarts-for-weixin'
                        + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
                    return;
                }
                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 && this.data.ec.onInit) {
                        this.chart = this.data.ec.onInit(canvas, res.width, 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];
                    this.chart._zr.handler.dispatch('mousedown', {
                        zrX: touch.x,
                        zrY: touch.y
                    });
                    this.chart._zr.handler.dispatch('mousemove', {
                        zrX: touch.x,
                        zrY: touch.y
                    });
                }
            },
            touchMove(e) {
                if (this.chart && e.touches.length > 0) {
                    var touch = e.touches[0];
                    this.chart._zr.handler.dispatch('mousemove', {
                        zrX: touch.x,
                        zrY: touch.y
                    });
                }
            },
            touchEnd(e) {
                if (this.chart) {
                    const touch = e.changedTouches ? e.changedTouches[0] : {};
                    this.chart._zr.handler.dispatch('mouseup', {
                        zrX: touch.x,
                        zrY: touch.y
                    });
                    this.chart._zr.handler.dispatch('click', {
                        zrX: touch.x,
                        zrY: touch.y
                    });
                }
            }
        }
    }
script>
<style lang="less">
.ec-canvas {
  width: 100%;
  height: 100%;
}
style>

这样就把组件创建完了

然后再调用，调用方法和官方一致

import * as echarts from '../../../packages/ec-canvas/echarts';
  function initChart(canvas, width, height) {
      ......//echarts代码
  }

  export default {
    config: {
      "usingComponents": {
        "ec-canvas": "../../../packages/ec-canvas"
      },
      ...
    },
}

撒花~OVER!