Echarts可视化工具很方便的解决了统计图表的问题，但是微信小程序是不支持 DOM 操作，后来在Echarts官网找到了微信小程序的版本。
开始上代码了，首先要在index.wxml中定义，我要在一个页面中使用两个图表
<!--index.wxml-->
<
view
class=
"containerForm">
<
ec-canvas
id=
"mychart-dom-multi-bar"
canvas-id=
"mychart-multi-bar"
ec=
"{{ ecBar }}"></
ec-canvas
>
<
ec-canvas
id=
"mychart-dom-multi-scatter"
canvas-id=
"mychart-multi-scatter"
ec=
"{{ ecPie }}"></
ec-canvas
>
</
view
>
index.js中
import *
as echarts
from
'../../../ec-canvas/echarts';
1:引入插件，插件可以在官网定制http://echarts.baidu.com/builder.html
2:为了方便赋值，这里建立两个全局变量
变量是根据业务情景，关于猪的
var barGraph =
null;
var pieChart =
null;
3:在page模块种的data里加入
data: {
ecBar: {
onInit:
function (canvas, width, height) {
barGraph = echarts.init(canvas,
null, {
width: width,
height: height
});
canvas.setChart(barGraph);
return barGraph;
}
},
ecPie: {
onInit:
function (canvas, width, height) {
pieChart = echarts.init(canvas,
null, {
width: width,
height: height
});
canvas.setChart(pieChart);
return pieChart;
}
}
},
4：onLoad中加载请求数据
onLoad:
function () {
//加载过快导致echarts未创建完成出现空值错误
setTimeout(
this.getData,
500);
},
5:getData方法里发送ajax
getData() {
wx.showLoading({
title:
'加载中...',
});
let that =
this;
util.request(发送ajax请求).then(
function (res) {
if (res.errno ===
0) {
//第一个
barGraph.setOption({
color: [
'#37a2da',
'#32c5e9',
'#67e0e3'],
tooltip: {
trigger:
'axis',
axisPointer: {
type:
'shadow'
}
},
grid: {
left:
20,
right:
20,
bottom:
15,
top:
40,
containLabel:
true
},
xAxis: [
{
type:
'value',
axisLine: {
lineStyle: {
color:
'#999'
}
},
axisLabel: {
color:
'#666'
}
}
],
yAxis: [
{
type:
'category',
axisTick: { show:
false },
data: [
'纵坐标数据
',...],
axisLine: {
lineStyle: {
color:
'#999'
}
},
axisLabel: {
color:
'#666'
}
}
],
series: [
{
name:
'肉猪',
type:
'bar',
stack:
'总量',
label: {
normal: {
show:
true
}
},
data: [res.data.value,...],//后台数据
itemStyle: {
}
}
]
});
//第二个
pieChart.setOption({
backgroundColor:
"#ffffff",
color: [
"#37A2DA",
"#32C5E9",
"#67E0E3",
"#91F2DE",
"#007500"],
series: [{
label: {
normal: {
fontSize:
14
}
},
type:
'pie',
center: [
'50%',
'50%'],
radius: [
0,
'40%'],
data: [{
value: res.data.sowCount,//数据
name:
'饼图模块名称'
}，{...}
],
itemStyle: {
emphasis: {
shadowBlur:
10,
shadowOffsetX:
0,
shadowColor:
'rgba(0, 2, 2, 0.3)'
}
}
}]
});
}
wx.hideLoading();
});
}
这样就可以了，其中注意...的省略