php echarts异步加载数据格式,微信小程序中使用ECharts 异步加载数据实现图表功能...

具体代码如下所示：

import * as echarts from '../../ec-canvas/echarts';

var barec = 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);

return barec;

}

}

},

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);

var data = 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) {

return params.seriesName + ' :
'

+ params.value[0] + 'm '

+ params.value[1] + 'm ';

}

else {

return params.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 异步加载数据实现图表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！