主頁 > 知識庫 > Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法

Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法

熱門標簽:上海浦東百度地圖標注中心注冊 科智聯(lián)智能電銷機器人 百靈鳥 青海醫(yī)療智能外呼系統(tǒng)怎么樣 目標三維地圖標注 老虎郵局地圖標注點 外呼系統(tǒng)獲取客戶手機號 徐州電銷卡外呼系統(tǒng)供應商 襄陽外呼系統(tǒng)接口

在做一個需要用到echarts地圖的項目的時候,成功通過ajax獲取到了后臺提供的數(shù)據(jù),并生成了想要的JSON串。但是,放到echarts option.series[0].data里,獲取不到數(shù)據(jù)。在生成的地圖上無法看到你從后臺獲取到的值。翻遍百度和必應,給出的答案五花八門,仍舊未解決問題,最后還是一個同事大牛給解決的,在此分享給大家。希望對大家有幫助,,,,

廢話不多說,直接上碼:

$(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:['高','低'], // 文本,默認為數(shù)值文本
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對象加載數(shù)據(jù) 
//myChart.setOption(option);
//});
}
//獲取...排行數(shù)據(jù)
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);//執(zhí)行setOption函數(shù)。傳參
}
});
}
getMapData(2);
});

里面最重要的就是從后臺獲取到的數(shù)據(jù)是通過傳參的形式放到echarts里的。

當時我做的時候未通過傳參的形式,在echarts里獲取到的數(shù)據(jù)始終是空的。

您可能感興趣的文章:
  • echarts圖表導出excel示例
  • echarts3 使用總結(繪制各種圖表,地圖)
  • 詳解ECharts使用心得總結
  • ECharts儀表盤實例代碼(附源碼下載)
  • 在vue中添加Echarts圖表的基本使用教程
  • 在Vue中使用echarts的實例代碼(3種圖)
  • jsp使用ECharts動態(tài)在地圖上標識點
  • echarts學習筆記之圖表自適應問題詳解
  • echarts整合多個類似option的方法實例

標簽:辛集 商洛 揭陽 紅河 股票 荊州 佛山 咸寧

巨人網(wǎng)絡通訊聲明:本文標題《Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法》,本文關鍵詞  Ajax,獲取,到,數(shù)據(jù),放入,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法》相關的同類信息!
  • 本頁收集關于Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法的相關信息資訊供網(wǎng)民參考!
  • 推薦文章