Ajax 에서 데 이 터 를 가 져 와 echarts 에 표시 되 지 않 는 원인 분석 및 해결 방법

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);
});
그 중에서 가장 중요 한 것 은 배경 에서 얻 은 데 이 터 는 전 삼 형식 을 통 해 echarts 에 넣 는 것 이다.
당시 에 내 가 할 때 전 삼 형식 을 통 해 echarts 에서 얻 은 데 이 터 는 항상 비어 있 었 다.

좋은 웹페이지 즐겨찾기