Analyse et solutions aux raisons pour lesquelles les données obtenues par Ajax ne sont pas affichées dans les graphiques-js tutoriel-php.cn

Analyse et solutions aux raisons pour lesquelles les données obtenues par Ajax ne sont pas affichées dans les graphiques

亚连

Libérer： 2018-05-24 11:25:50

original

3091 Les gens l'ont consulté

Lorsque je travaillais sur un projet nécessitant l'utilisation de cartes echarts, j'ai réussi à obtenir les données fournies par l'arrière-plan via ajax et à générer la chaîne JSON souhaitée. Cependant, lorsqu'il est placé dans echarts option.series[0].data, aucune donnée ne peut être obtenue. Vous ne pouvez pas voir la valeur que vous avez obtenue à partir de l'arrière-plan sur la carte générée. Je partagerai ma solution avec vous ci-dessous. Les amis qui en ont besoin peuvent s'y référer

Lorsqu'ils travaillent sur un projet nécessitant l'utilisation d'une carte echarts. , Les données fournies par l'arrière-plan ont été obtenues avec succès via ajax et la chaîne JSON souhaitée a été générée. Cependant, lorsqu'elles sont placées dans echarts option.series[0].data, les données ne peuvent pas être obtenues. Les valeurs que vous obtenez en arrière-plan ne sont pas visibles sur la carte générée. Après avoir cherché sur Baidu et Bing, les réponses données étaient diverses, mais le problème n'était toujours pas résolu, un collègue, un expert, l'a résolu et j'aimerais le partager avec tout le monde. J'espère que cela aidera tout le monde,,,,

Sans plus tarder, passons directement au code :

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

Copier après la connexion

Le plus important est que les données obtenues en arrière-plan soient sous la forme des paramètres de passage Mettez-le dans des graphiques.

Quand je l'ai fait, je n'ai pas transmis de paramètres et les données obtenues dans les echarts étaient toujours vides.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.