当前位置： 移动技术网 > IT编程>脚本编程>Ajax > Ajax获取到数据放入echarts里不显示的原因分析及解决办法

Ajax获取到数据放入echarts里不显示的原因分析及解决办法

2017年12月08日  | 移动技术网IT编程  | 我要评论

在做一个需要用到echarts地图的项目的时候，成功通过ajax获取到了后台提供的数据，并生成了想要的json串。但是，放到echarts option.series[0].data里，获取不到数据。在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应，给出的答案五花八门，仍旧未解决问题，最后还是一个同事大牛给解决的，在此分享给大家。希望对大家有帮助，，，，

废话不多说，直接上码：

$(function () { 
var data = [];
function setoption(data){
var mychart = echarts.init(document.getelementbyid('main'));
//window.onresize = mychart.resize;
var option = {
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);
//});
}
//获取...排行数据
function getmapdata(limit){ 
$.ajax({
url:'http://127.0.0.1/api/adminunit/score/top/'+limit,
type:'post',
datatype:'json',
success:function(objdata){
//var str = json.parse(objdata);
for(var i = 0;i < objdata.length;i ++){
var did = parseint(objdata[i].id);
//var dname="天津市";
//if(did==1){
// dname="北京市";
//}
var dname = objdata[i].name;
var dscore = parseint(objdata[i].score);
var onedata = {};
var onedata = {id:did,name:dname,value:dscore};
data.push(onedata);
}
console.log(data);
//option.series[0].data=data;
setoption(data);//执行setoption函数。传参
}
});
}
getmapdata(2);
});

里面最重要的就是从后台获取到的数据是通过传参的形式放到echarts里的。

当时我做的时候未通过传参的形式，在echarts里获取到的数据始终是空的。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网