Ajax擷取到資料放入echarts裡不顯示的原因分析及解決辦法_AJAX相關

在做一個需要用到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裡擷取到的資料始終是空的。