简介
- 为了兼容小程序 Canvas，ECharts官方提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。该项目是ECharts微信小程序版本，包含小程序组件和使用的示例。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。
- ec-canvas 是ECharts提供的组件，其他文件是如何使用该组件的示例。
- ec-canvas 目录下有一个 echarts.js，可以自行从 ECharts 项目中下载最新发布版。默认的echarts.js文件较大，可以从官网自定义构建以减小文件大小。
备注
示例
- 使用微信开发工具创建项目，在 pages目录下新建index文件夹并添加文件，可点击右键选择“新建Page”：index.js、 index.json、 index.wxml、 index.wxss。在 app.json 的 pages 中增加 ‘pages/index/index’，如果使用快捷方式可自动填写。
- 拷贝ECharts项目ec-canvas文件到项目。
- 配置index.json，引入ec-canvas组件。
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
- index.html内容如下。
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
{ ec }}"></ec-canvas>
</view>
- index.js结构如下，我们只需要修改 option 的内容，即可改变图表。。
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
title: {
text: '测试下面legend的红色区域不应被裁剪',
left: 'center'
},
color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
legend: {
data: ['A', 'B', 'C'],
top: 50,
left: 'center',
backgroundColor: 'red',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: [{
name: 'A',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: 'C',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}]
};
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() {
}
});
- 图表显示如下。
常见问题
- [JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。
ec-canvas/echarts.js
答：由于echarts.js体积过大，即使经过UglifyJS 压缩仍旧大于500KB，所以微信开发工具会给出以上警告。但开发者不用太过在意，这并不会影响程序的正常运行，可自行忽略。如果有强迫症的话，可以前往官网在线定制以减少echarts.js大小。 - 当我们运行官方的案例，你可能会发现图表并没有显示出来，怎么回事？
答：我们来检查一下。有语法错误吗吗？没有。组件参数是不是指定了？是的。option是不是设置了数据？是啊。组件长宽设置了吗？已经接近正确答案了。怎么回事？只能在网上找找找，找了半天也不见得有答案。
细心的小年轻可能会发现，其实官方已经给了我们提示。
此时我的心里，只能冒出一句，“傻逼！！！”，回头爆头痛苦。
参考：
https://github.com/ecomfe/echarts-for-weixin
OK，终于可以开心画出好看的图表了！！！
