您的位置:首页 > 其它

解决Ajax获取到数据放入echarts里不显示最有效的解决方法

2018-02-03 17:35 513 查看
废话不多说,直接上码:

var temp = [];
var tempArray = [];
var data;

$.ajax({
type : "post",
url:"http://192.168.0.12:9090/sqk/app/data/alipay?id=20171024",
data : {},
dataType : "json",
success : function(data) {
if (data) {
$.each(data, function (index, value) {
tempArray.push(value.pay_date,value.num);
temp.push(tempArray);
tempArray = [];
})

data = temp;
setOption(data);
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
})

function setOption(data){
// 基于准备好的dom,初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

myChart.showLoading();

var dateList = data.map(function (item) {
return item[0];
});
var valueList = data.map(function (item) {
return item[1];
});

option = {
tooltip: {
trigger: 'axis'
},
legend: {
data:[]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
data: dateList
},
yAxis: {
splitLine: {show: false},
type: 'value'
},
series: [
{
name:'红包领取',
type:'line',
stack: '总量',
data:valueList
}
]
};

myChart.setOption(option);

myChart.hideLoading();
}

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐