Ajax获取到数据放入echarts里不显示的原因分析及解决办法-tutorial js-php.cn

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

亚连

Lepaskan： 2018-05-24 11:25:50

asal

3129 orang telah melayarinya

在做一个需要用到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(&#39;main&#39;));
//window.onresize = myChart.resize;
var option = {
title : {
text: &#39;全国...分布图&#39;,
// subtext: &#39;纯属虚构&#39;,
x:&#39;left&#39;
},
tooltip : {
trigger: &#39;item&#39;
},
// legend: {
// orient: &#39;vertical&#39;,
// x:&#39;left&#39;,
// data:[&#39;iphone3&#39;,&#39;iphone4&#39;,&#39;iphone5&#39;]
// },
dataRange: {
min: 0,
max: 10,
x: &#39;left&#39;,
y: &#39;bottom&#39;,
text:[&#39;高&#39;,&#39;低&#39;], // 文本，默认为数值文本
color:[&#39;#ff5e5e&#39;, &#39;#ffa25e&#39;, &#39;#ffd05e&#39;,&#39;#fce6b2&#39;,&#39;#e1dbcd&#39;],
calculable : true
},
// toolbox: {
// show: true,
// orient : &#39;vertical&#39;,
// x: &#39;right&#39;,
// y: &#39;center&#39;,
// feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
// roamController: {
// show: true,
// x: &#39;right&#39;,
// mapTypeControl: {
// &#39;china&#39;: true
// }
// },
series : [
{
name: &#39;...&#39;,
type: &#39;map&#39;,
mapType: &#39;china&#39;,
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:data
}
]
};
myChart.setOption(option);
//$.getJSON(&#39;HotspotServlet&#39;,function(data){
//option.series[0].data=data.result;
// 为echarts对象加载数据 
//myChart.setOption(option);
//});
}
//获取...排行数据
function getMapData(limit){ 
$.ajax({
url:&#39;http://127.0.0.1/api/adminunit/score/top/&#39;+limit,
type:&#39;post&#39;,
dataType:&#39;JSON&#39;,
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);
});

Salin selepas log masuk

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

Ajax post请求跳转页面

Ajax提交表单页面刷新很快的解决方法

Ajax打开新窗口被浏览器拦截的两种解决办法

Atas ialah kandungan terperinci Ajax获取到数据放入echarts里不显示的原因分析及解决办法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!