Ajax获取到数据放⼊echarts⾥不显⽰的原因分析及解决
办法
在做⼀个需要⽤到echarts地图的项⽬的时候,成功通过ajax获取到了后台提供的数据,并⽣成了想要的JSON串。但是,放到echarts option.series[0].data⾥,获取不到数据。在⽣成的地图上⽆法看到你从后台获取到的值。翻遍百度和必应,给出的答案五花⼋门,仍旧未解决问题,最后还是⼀个同事⼤⽜给解决的,在此分享给⼤家。希望对⼤家有帮助,,,,
废话不多说,直接上码:
$(function () {
var data = [];
function setOption(data){
var myChart = echarts.ElementById('main'));
//size = size;
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}
/
jquery在项目里是干啥的/ }
// },
// 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].sult;
// 为echarts对象加载数据
//myChart.setOption(option);
//});
}
//获取...排⾏数据
function getMapData(limit){
$.ajax({
url:'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⾥获取到的数据始终是空的。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论