Echarts可视化工具很方便的解决了统计图表的问题，但是微信小程序是不支持DOM操作，后来在Echarts官网找到了微信小程序的版本。
开始上代码了，首先要在index.wxml中定义，我要在一个页面中使用两个图表
!--index.wxml--
viewclass="containerForm"
ec-canvasid="mychart-dom-multi-bar"canvas-id="mychart-multi-bar"ec="{{ecBar}}"/ec-canvas
ec-canvasid="mychart-dom-multi-scatter"canvas-id="mychart-multi-scatter"ec="{{ecPie}}"/ec-canvas
/view
index.js中
import*asechartsfrom'../../../ec-canvas/echarts';
1:引入插件，插件可以在官网定制http://echarts.baidu.com/builder.html
2:为了方便赋值，这里建立两个全局变量变量是根据业务情景，关于猪的
varbarGraph=null;
varpieChart=null;
3:在page模块种的data里加入
data:{
ecBar:{
onInit:function(canvas,width,height){
barGraph=echarts.init(canvas,null,{
width:width,
height:height
});
canvas.setChart(barGraph);
returnbarGraph;
}
},
ecPie:{
onInit:function(canvas,width,height){
pieChart=echarts.init(canvas,null,{
width:width,
height:height
});
canvas.setChart(pieChart);
returnpieChart;
}
}
},
4：onLoad中加载请求数据
onLoad:function(){
//加载过快导致echarts未创建完成出现空值错误
setTimeout(this.getData,500);
},
5:getData方法里发送ajax
getData(){
wx.showLoading({
title:'加载中...',
});
letthat=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();
});
}
这样就可以了，其中注意...的省略
