ECharts.js 是一个基于 JavaScript 的开源可视化图表库，它的功能很丰富，效果还不错，使用起来比较容易；它支持微信小程序平台，有个名叫 echarts-for-weixin 的微信小程序组件可用，你可以在它的官网找到下载地址，此篇文章介绍在微信小程序中使用 ECharts.js 的示例，下面看张效果图：
开始写主体代码前，需要将你下载的组件引入到微信小程序的项目中并且配置好在 .json 文件里的引用代码，比如：
"usingComponents": {
"ec-canvas": "/components/ec-canvas/ec-canvas"
}
你下载的 echarts-for-weixin 文件包里应该有个名叫 ec-canvas 的文件夹，里面应该有以 ec-canvas 为名的 4 个微信小程序页面文件和 echarts.js、wx-canvas.js 这两个 .js 文件。
wxml 部位代码：
<view class="VIEW_echart_graph_box">
<ec-canvas ec="{{echart_curve}}"></ec-canvas>
</view>
<view class="VIEW_echart_graph_box">
<ec-canvas ec="{{echart_bar}}"></ec-canvas>
</view>
那么 ec-canvas 元素就是图表组件了，建议应用中也将其用个容器元素包裹起来。
wxss 部位代码：
page {
padding: 10px;
box-sizing: border-box;
}
.VIEW_echart_graph_box {
width: 100%;
height: 320px;
margin: 0 0 10px 0;
border: 1px solid lightgray;
box-sizing: border-box;
}
注意一定要给容器元素设置高度且不能是百分比单位，不然不会显示。
js 部位代码：
import * as echarts from '../../components/ec-canvas/echarts';
function getEchartOption_curve() {
return {
title: {
top: 8,
left: 8,
text: "曲线图示例"
},
dataset: {
source: [{
date: "2023/1/1",
income: 240,
spend: 300
}, {
date: "2023/2/1",
income: 1240,
spend: 500
}, {
date: "2023/3/1",
income: 321,
spend: 457
}, {
date: "2023/4/1",
income: 982,
spend: 752
}, {
date: "2023/5/1",
income: 278,
spend: 808
}, {
date: "2023/6/1",
income: 656,
spend: 558
}, {
date: "2023/7/1",
income: 990,
spend: 543
}, {
date: "2023/8/1",
income: 454,
spend: 675
}, {
date: "2023/9/1",
income: 122,
spend: 23
}, {
date: "2023/10/1",
income: 633,
spend: 780
}, {
date: "2023/11/1",
income: 3756,
spend: 123
}, {
date: "2023/12/1",
income: 2240,
spend: 76
}]
},
grid: {
containLabel: true
},
legend: {
top: 10,
data: [{
lineStyle: {
color: "rgb(70,203,121)"
},
itemStyle: {
color: "rgb(70,203,121)"
},
name: "收入"
}, {
lineStyle: {
color: "rgb(198,57,57)"
},
itemStyle: {
color: "rgb(198,57,57)"
},
name: "支出"
}]
},
xAxis: [{
type: "category",
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
yAxis: [{
name: "收入(元)",
nameLocation: "center",
nameTextStyle: {
color: "rgb(70,203,121)",
align: "left",
padding: [0, 0, 30, 0]
},
type: "value",
axisLine: {
show: true
},
axisLabel: {
color: "rgb(70,203,121)"
},
min: 0,
max: 4000
}, {
name: "支出(元)",
nameLocation: "center",
nameTextStyle: {
color: "rgb(198,57,57)",
align: "left",
padding: [30, 0, 0, 0]
},
type: "value",
axisLine: {
show: true
},
axisLabel: {
color: "rgb(198,57,57)"
},
min: 0,
max: 4000
}],
series: [{
name: "收入",
yAxisIndex: 0,
type: "line",
smooth: true,
symbol: "none",
lineStyle: {
color: "rgb(70,203,121)"
}
}, {
name: "支出",
yAxisIndex: 1,
type: "line",
smooth: true,
symbol: "none",
lineStyle: {
color: "rgb(198,57,57)"
}
}]
}
}
function getEchartOption_bar() {
return {
title: {
top: 8,
left: 8,
text: "柱状图示例"
},
dataset: {
source: [{
province: "重庆",
male: 1620,
female: 1585
}, {
province: "四川",
male: 4229,
female: 4139
}, {
province: "贵州",
male: 1971,
female: 1886
}, {
province: "云南",
male: 2442,
female: 2279
}, {
province: "西藏",
male: 191,
female: 173
}]
},
grid: {
containLabel: true
},
legend: {
top: 20,
selectedMode: false,
data: [{
itemStyle: {
color: "rgb(37,176,243)"
},
name: "男"
}, {
itemStyle: {
color: "rgb(209,64,227)"
},
name: "女"
}]
},
xAxis: {
type: "category",
axisTick: {
show: false
}
},
yAxis: {
type: "value",
name: "人口数(万人)",
nameLocation: "end",
nameTextStyle: {
align: "right"
},
},
series: [{
name: "男",
type: "bar",
silent: true,
stack: "people",
itemStyle: {
color: "rgb(37,176,243)"
}
}, {
name: "女",
type: "bar",
silent: true,
stack: "people",
itemStyle: {
color: "rgb(209,64,227)"
}
}]
}
}
Page({
// 我总觉得下面两个 onInit 方法可以合并为一个方法，加个区别传递的 Option 参数，不过这是官方的用法，为了不节外生枝并确保别人的代码有效，我便没有测试是否可以这样做
data: {
echart_curve: {
onInit: function (canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
chart.setOption(getEchartOption_curve());
return chart;
}
},
echart_bar: {
onInit: function (canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
chart.setOption(getEchartOption_bar());
return chart;
}
}
},
onLoad(options) {
}
})
与通常的微信小程序代码有所不同的是，顶部先引入了 echarts 对象，这用来执行其初始化方法，ECharts 图表所用的 Option 参数写成了 Javascript 方法放到了微信小程序 Page 对象的外部，这是官方示例这样做的，毕竟 ECharts.js 不是专门为微信小程序而生的库，原生是 Javascript，这样的应用在微信小程序中看起来很奇怪，但还是尽量按照官方的意图来吧；ECharts 的 Option 参数配置方面请直接参看官方的文档，这些和原生平台是一样的。
结语：我在使用 ECharts 库的时候遇到了很多坑，这个库里有些功能的程序接口很反开发者的常规认知，很多参数不完善，小问题很多，使用时需多方面调测，不过我觉得它仍然是目前互联网上我用过的最好用的开源图表库。