微信小程序中使用ECharts实现报表图表展示
Echarts可视化工具很方便的解决了统计图表的问题，但是微信小程序是不支持 DOM 操作，后来在Echarts官网找到了微信小程序的版本。
开始上代码了，首先要在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();
});
}
这样就可以了，其中注意...的省略