小程序蛮火的 咱也搞一个
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 变量，例：<ec-canvas id="mychart-dom-bar" ' + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'); 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" }, ... },}
