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();
});
}
这样就可以了 其中注意...的省略
点赞 6 评论 6
