1.在小程序根目录下放入ec-canvas 文件夹,下载链接https://github.com/ecomfe/echarts-for-weixin
2.引入ec-canvas组件。在需要使用该组件的页面的json文件中添加
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas" //该路径为ec-canvas存放的相对路径
}
}
3.在wxml文件当中应用,ec 是当前页面js 中定义的对象,它使得图表能够在页面加载后被初始化并设置。
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
4.js页面中开始定义ec对象
import * as echarts from '../../ec-canvas/echarts' //引入ec-canvas下的echarts.js文件
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
option中添加的参数值则为当前图标所需的配置项。参考https://www.echartsjs.com/zh/option.html#title
也可直接在官方实例中复制实例中的option内容,在上面 的基础上逐一进行修改为自己项目所需的样式。https://www.echartsjs.com/examples/zh/index.html