Analyse und Lösungen für die Gründe, warum die von Ajax erhaltenen Daten nicht in Echarts angezeigt werden

Bei der Arbeit an einem Projekt, das die Verwendung von Echarts-Karten erforderte, habe ich die vom Hintergrund bereitgestellten Daten erfolgreich über Ajax abgerufen und die gewünschte JSON-Zeichenfolge generiert. Wenn sie jedoch in echarts option.series[0].data platziert werden, können die Daten nicht abgerufen werden. Sie können den Wert, den Sie aus dem Hintergrund erhalten haben, auf der generierten Karte nicht sehen. Ich werde meine Lösung unten mit Ihnen teilen.

Wenn Sie an einem Projekt arbeiten, das die Verwendung einer Echarts-Karte erfordert , Die vom Hintergrund bereitgestellten Daten wurden erfolgreich über Ajax abgerufen und die gewünschte JSON-Zeichenfolge generiert. Wenn es jedoch in echarts option.series[0].data platziert wird, können keine Daten abgerufen werden. Die Werte, die Sie aus dem Hintergrund erhalten, sind auf der generierten Karte nicht zu sehen. Nach der Durchsuchung von Baidu und Bing waren die Antworten unterschiedlich, aber das Problem war immer noch nicht gelöst. Am Ende hat es ein Kollege, ein Experte, gelöst, und ich möchte es mit allen teilen. Ich hoffe, es hilft allen.

Kommen wir ohne weitere Umschweife direkt zum Code:

$(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);
});

Das Wichtigste ist, dass die aus dem Hintergrund erhaltenen Daten in die Form gebracht werden Parameter.

Als ich es tat, habe ich keine Parameter übergeben und die in Echarts erhaltenen Daten waren immer leer.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Beitragsanfrage-Sprungseite

Die Ajax-Einreichungsformularseite wird schnell aktualisiert

Zwei Lösungen dafür, dass Ajax ein neues Fenster öffnet und vom Browser blockiert wird

Das obige ist der detaillierte Inhalt vonAnalyse und Lösungen für die Gründe, warum die von Ajax erhaltenen Daten nicht in Echarts angezeigt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!