Ajax에서 얻은 데이터가 전자 차트에 표시되지 않는 이유에 대한 분석 및 해결 방법

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,
// 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);
});

가장 중요한 것은 백그라운드에서 얻은 데이터가 매개변수 전송 형태로 전자차트에 들어간다는 점입니다.

그렇게 했을 때 매개변수를 전달하지 않았고 전자차트에서 얻은 데이터는 항상 비어 있었습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Ajax 게시물 요청 점프 페이지

Ajax 제출 양식 페이지가 빠르게 새로 고쳐집니다.

새 창을 열고 브라우저에 의해 차단되는 Ajax를 위한 두 가지 솔루션

위 내용은 Ajax에서 얻은 데이터가 전자 차트에 표시되지 않는 이유에 대한 분석 및 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!