php echarts读取地图数据格式,AJAX_Ajax获取到数据放入echarts里不显示的原因分析及解决办法，在做一个需要用到echarts地图的 - phpStudy...

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里获取到的数据始终是空的。相关阅读:

jsp base标签与meta标签学习小结

C#实现矩阵乘法实例分析

Windows下的PHP安装文件线程安全和非线程安全的区别

jQuery .tmpl() 用法示例介绍

Java设计模式之策略模式(Strategy模式)介绍

Linux命令行中采集指定页面的图片地址及图片下载

Win7/win8补丁打不上无法修复该怎么办?

mvc开启gzip压缩示例分享

Windows 10.1原型截图首曝：桌面和开始菜单变化实在太大了

win10中的Windows.old 文件夹能删除吗？

HTML5中新标签和常用标签详解

使用requestAnimationFrame实现js动画性能好

ASP.NET插件uploadify批量上传文件完整使用教程

js如何判断用户是在PC端和还是移动端访问