具体操作

把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。

对 ec-canvas/ec-canvas.js 进行小调整，考虑提 pr 到 ec-canvas。

修改 ready 为异步获取数据。

ready: function () {

// 异步获取

setTimeout(() => {

if (!this.data.ec) {

console.warn('组件需绑定 ec 变量，例：

+ 'canvas-id="mychart-bar" ec="{{ ec }}">

');

return;

}

if (!this.data.ec.lazyLoad) {

this.init();

}

}, 10)

}

为 init 添加接收 options 传参

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);

}

else if (this.data.ec && this.data.ec.options) {

// 添加接收 options 传参

const ec = this.data.ec

function initChart(canvas, width, height) {

const chart = echarts.init(canvas, null, {

width: width,

height: height

});

canvas.setChart(chart);

chart.setOption(ec.options);

return chart;

}

this.chart = initChart(canvas, res.width, res.height);

}

}).exec();

创建 pages/bar 页面，目录如下：

.

└── pages

└── bar

├── index.vue

└── main.js

在 main.js 中引入微信小程序的自定义组件

import Vue from 'vue'

import App from './index'

const app = new Vue(App)

app.$mount()

// 添加 config json

export default {

config: {

// 这儿添加要用的小程序组件

usingComponents: {

'ec-canvas': '../../../static/ec-canvas/ec-canvas'

}

}

}

在 app.vue 中添加 options、template 等相关配置

const options = {

// more code ...

}

export default {

data () {

return {

ec: {

// 传 options

options: options,

}

}

}

}

ec-canvas {

width: 400px;

height: 400px;

}

Build Setup

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

# build for production and view the bundle analyzer report

npm run build --report