微信小程序引入echars图表组件
官网资源地址
https://github.com/ecomfe/echarts-for-weixin
引入图表组件到微信小程序
下载解压git项目，查看目录，将文件夹ec-canvas，复制到小程序内pages同级目录
-
将解压项目文件中pages的图表展示，复制任一风格图表到要添加的微信小程序pages内，并在app.json内注册这个路径
注册页面路径
图表文件列表
- 具体代码段
import * as echarts from '../../ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = { /*具体使用什么风格的图表，在这里编辑数据*/ };
chart.setOption(option);
return chart;
};
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
setTimeout(function () {
// 获取 chart 实例的方式
// console.log(chart)
}, 2000);
}
});
- 一些注意事项：
- 在ec-canvas文件夹内的echarts.js，不能超过500kb，否则警告，且无法渲染；
解决办法：
通过https://echarts.apache.org/zh/builder.html，进行定制化，用到什么表格，就勾选哪个，不要都用，实测后发现使用一个普通的柱状图后，echarts.js文件就已经443kb了。
注意：
下载的文件放在 ec-canvas/echarts.js，注意一定需要重命名为 echarts.js，否则 ec-canvas.js 引入路径会错误：
ec-canvas.js内的依赖：
import WxCanvas from './wx-canvas';
import * as echarts from './echarts';
echars在线定制-1
echars在线定制-2
- 官方建议可以尝试微信的分包操作，但是不会，因为开发的都是企业身份账号，后续考虑使用webview嵌套H5，规避图表选择种类的限制，一劳永逸的解决这个问题。
