Ajax获取到数据放入echarts里不显示的原因分析及解决办法
发布时间：2020-12-15 23:09:07 所属栏目：百科 来源：网络整理
导读：在做一个需要用到echarts地图的项目的时候，成功通过ajax获取到了后台提供的数据，并生成了想要的JSON串。但是，放到echarts option.series[0].data里，获取不到数据。在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应，给出的答案五花八门，仍旧
|
在做一个需要用到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,// 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里获取到的数据始终是空的。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |