Ajax获取到数据放入echarts里不显示的原因分析及解决办法
在做一个需要用到echarts地图的项目的时候，成功通过ajax获取到了后台提供的数据，并生成了想要的JSON串。但是，放到echartsoption.series[0].data里，获取不到数据。在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应，给出的答案五花八门，仍旧未解决问题，最后还是一个同事大牛给解决的，在此分享给大家。希望对大家有帮助，，，，
废话不多说，直接上码：
$(function(){
vardata=[];
functionsetOption(data){
varmyChart=echarts.init(document.getElementById('main'));
//window.onresize=myChart.resize;
varoption={
title:{
text:'全国...分布图',
//subtext:'纯属虚构',
x:'left'
},
tooltip:{
trigger:'item'
},
//legend:{
//orient:'vertical',
//x:'left',
//data:['iphone3','iphone4','iphone5']
//},
dataRange:{
min:0,
max:10,
x:'left',
y:'bottom',
text:['高','低'],//文本，默认为数值文本
color:['#ff5e5e','#ffa25e','#ffd05e','#fce6b2','#e1dbcd'],
calculable:true
},
//toolbox:{
//show:true,
//orient:'vertical',
//x:'right',
//y:'center',
//feature:{
//mark:{show:true},
//dataView:{show:true,readOnly:false},
//restore:{show:true},
//saveAsImage:{show:true}
//}
//},
//roamController:{
//show:true,
//x:'right',
//mapTypeControl:{
//'china':true
//}
//},
series:[
{
name:'...',
type:'map',
mapType:'china',
roam:false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:data
}
]
};
myChart.setOption(option);
//$.getJSON('HotspotServlet',function(data){
//option.series[0].data=data.result;
//为echarts对象加载数据
//myChart.setOption(option);
//});
}
//获取...排行数据
functiongetMapData(limit){
$.ajax({
url:'http://127.0.0.1/api/adminunit/score/top/'+limit,
type:'post',
dataType:'JSON',
success:function(objdata){
//varstr=JSON.parse(objdata);
for(vari=0;i<objdata.length;i++){
vardId=parseInt(objdata[i].id);
//vardName="天津市";
//if(dId==1){
//dName="北京市";
//}
vardName=objdata[i].name;
vardScore=parseInt(objdata[i].score);
varoneData={};
varoneData={id:dId,name:dName,value:dScore};
data.push(oneData);
}
console.log(data);
//option.series[0].data=data;
setOption(data);//执行setOption函数。传参
}
});
}
getMapData(2);
});
里面最重要的就是从后台获取到的数据是通过传参的形式放到echarts里的。
当时我做的时候未通过传参的形式，在echarts里获取到的数据始终是空的。