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