微信小程序中使用ECharts 异步加载数据实现图表功能

2023-09-10 08:43:06 62

import*asechartsfrom'../../ec-canvas/echarts'; varbarec=null Page({ onShareAppMessage:function(res){ return{ title:'ECharts可以在微信小程序中使用啦！', path:'/pages/index/index', success:function(){}, fail:function(){} } }, data:{ ec:{ onInit:function(canvas,width,height){ barec=echarts.init(canvas,null,{ width:width, height:height }); canvas.setChart(barec); returnbarec; } } }, onReady(){ setTimeout(this.getData,500); }, //getData方法里发送ajax getData(){ wx.showLoading({ title:'加载中...', }) wx.request({ url:'http://192.168.3.81/heart.php', herder:{ "content-type":"json" }, success:function(res){ console.log(res); vardata=res.data.info; console.log(data); barec.setOption({ grid:{ left:'3%', right:'7%', bottom:'3%', containLabel:true }, tooltip:{ //trigger:'axis', showDelay:0, formatter:function(params){ if(params.value.length>1){ returnparams.seriesName+':
' +params.value[0]+'m' +params.value[1]+'m'; } else{ returnparams.seriesName+':
' +params.name+':' +params.value+'m'; } }, axisPointer:{ show:true, type:'cross', lineStyle:{ type:'dashed', width:1 } } }, legend:{ data:["学生"], left:'center' }, xAxis:[ { type:'value', scale:true, axisLabel:{ formatter:'{value}m' }, splitLine:{ show:false } } ], yAxis:[ { type:'value', scale:true, axisLabel:{ formatter:'{value}m' }, splitLine:{ show:false } } ], series:[{ name:'学生', //symbolSize:20, data:data, type:'scatter', markArea:{ silent:true, itemStyle:{ normal:{ color:'transparent', borderWidth:1, borderType:'dashed' } }, data:[[{ name:'教室', xAxis:'0', yAxis:'0' },{ xAxis:'20', yAxis:'20' }]] }, markPoint:{ //data:[ //{type:'max',name:'最大值'}, //{type:'min',name:'最小值'} //] }, markLine:{ lineStyle:{ normal:{ type:'solid' } }, //data:[ //{type:'average',name:'平均值'}, //{xAxis:160} //] } }] }) wx.hideLoading(); }, fail:function(res){}, complete:function(res){}, }) } });

微信小程序中使用ECharts 异步加载数据实现图表功能

热门推荐

随机推荐