访问https://github.com/ecomfe/echarts-for-weixin,下载文件后,把ec-canvas整个文件夹复制到我们的小程序项目中

然后在需要使用echarts的页面的json中引入组件

js文件中也要引入:import * as echarts from '../../ec-canvas/echarts'
然后在wxml文件中引入组件ec-canvas
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
其中 ec 是一个我们在 index.js 中定义的对象,它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下:
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素比
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
发布时,如果包体积太大,可以在 https://echarts.apache.org/zh/builder.html网页下载仅包含必要组件的包,并且选择压缩,比如如果只用到了柱状图,就只用选择柱状图,文件包就会小很多

下载的文件放在 ec-canvas/echarts.js,注意一定需要重命名为 echarts.js。