Ajax获取到数据放入echarts里不显示的原因分析及解决办法
作者：web郭乐
字体：[ ] 类型：转载 时间：
在做一个需要用到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.
var option = {
text: '全国...分布图',
// subtext: '纯属虚构',
tooltip : {
trigger: 'item'
// legend: {
// orient: 'vertical',
// x:'left',
// data:['iphone3','iphone4','iphone5']
dataRange: {
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}}
myChart.setOption(option);
//$.getJSON('HotspotServlet',function(data){
//option.series[0].data=data.
// 为echarts对象加载数据
//myChart.setOption(option);
//获取...排行数据
function getMapData(limit){
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.i ++){
var dId = parseInt(objdata[i].id);
//var dName="天津市";
//if(dId==1){
// dName="北京市";
var dName = objdata[i].
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=
setOption(data);//执行setOption函数。传参
getMapData(2);
里面最重要的就是从后台获取到的数据是通过传参的形式放到echarts里的。
当时我做的时候未通过传参的形式，在echarts里获取到的数据始终是空的。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具插件描述：Ets中国地图选择器demo
相关插件-地图
讨论这个项目（11）回答他人问题或分享插件使用方法奖励jQ币
醉迹满青衫 0
官网实例？
ap457921 0
官网实例？
怎么改颜色？
一转身叹流年已苍白 0
这不是ECharts官网实例吗
可以加载其他数据与穿透么？
little smart 0
可以在上面添加事件吗？
粘人的茹宝宝0
这给每个省份添加事件啊
PROMULGATOR
福建省厦门市
关注作者 (17)
收藏此插件 (101)
我当前jQ币余额：正在获取..
已下载次数：725
所需jQ币：1echarts地图悬浮层点击渗透到地图层的解决
在项目中，全国地图上显示各个省的销量情况；鼠标悬浮到具体某个省上时，显示各个供应商的销量情况列表。
但是悬浮层空间有限，只能显示名称和销量，供应商的具体信息不可能完全显示，那我们可以在名称上加链接，点击之后弹出一个页面用于显示供应商的详细信息。
那么问题来了，当鼠标悬浮在悬浮层某个a标签的时候，地图上的某个省份进入到选中状态。当鼠标点下时，不仅触发了a标签里的JavaScript代码，也触发了地图某省份的click时间对应的JavaScript代码。当省份需要钻取到地市一级的时候，就会出现刚刚打开供应商详情页，紧接着跳转到选中省份的地市一级的页面。
当悬浮层在陕西省时，鼠标落在悬浮层时，悬浮层下的陕西省处于选中状态。于是我想到了第一种解决方案，增加悬浮层的zindex，使悬浮层的div置于地图的canvas之上。但是发现之是有小幅度改善，当鼠标位于悬浮层上时，距离悬浮层很远的某个省份处于选中状态，用zindex是控制不了的。
既然不治本，那就治标吧，把混乱现象阻止住即可。混乱在哪呢？点击悬浮层时，不仅悬浮层的事件响应，地图的点击事件也响应。于是我想到了下面这种解决方案：
点击悬浮层时，悬浮层的JavaScript正常运行。当点击地图时，我们判断鼠标是否落在悬浮层内，如果落在悬浮层则停止地图点击触发的事件对应的操作；如果不在悬浮层上，则继续。
1.当点击地图时，因为悬浮层没有被点击，只执行地图点击事件对应的函数。
2.当点击悬浮层时，因为地图没有被点击，只执行悬浮层点击事件对应的函数。
3.当二者都没点击时，不执行任何函数。
4.当点击悬浮层误触地图时，悬浮层点击事件响应，执行对应的函数；地图点击事件也响应，执行函数，但是在函数的前半段，检查到鼠标位于悬浮层内，函数执行停止，不会进入后半段，地图点击事件虽然响应但是没有可视化的反应，在用户来看就像没有反应。
具体判断代码如下：
悬浮层class置为mywindow；
地图点击事件按照下面的方法写：
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var event = param.
var x=event.pageX,y=event.pageY;
var left = $(".mywindow").offset().
var right = $(".mywindow").offset().left+$(".mywindow").width();
var top = $(".mywindow").offset().
var bottom = $(".mywindow").offset().top+$(".mywindow").height();
if(x&=left && x&=right && y&=top && y&=bottom){
//下面写地图被点击相应的逻辑Echarts之map地图隐藏港澳台等区域 - CSDN博客
Echarts之map地图隐藏港澳台等区域
只是提供一种思路：
china.js中找到echarts.registerMap(‘china’, {中的”features”KEY值
"id": "710000",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
["@@°???", "@@??????????\\?sAEN????oen?????????NJ?x????ò?,–??(R)?X???Z??<??G?¨?Mó·?c???l?????^?·????Nj???í??G?(TM)?I????F??W?????", "@@\\p|WoYG??I+j@?", "@@…?‰@?^V^Rq^B?bAOEnTXe,,+?Qr(TM)(C)C", "@@AEEE—,,kWq? Ioe"]
"encodeOffsets": [
[122886, 24033],
[123335, 22980],
[122375, 24193],
[122518, 24117],
[124427, 22618]
"properties": {
"cp": [121, 24],
"name": "台湾",
"childNum": 5
删掉或者注释掉。其他两个地方同样。
然后是南海诸岛，数据中没有展示的数据的话，恰巧又是自定义显示的对应的数值出现在下方的时候，会出现NAN，影响美观
南海自古以来就是中国的领土！！
思路一：隐藏不显示南海诸岛；打开echarts.js ,找到
module.exports = function (geo) {
if (geo.map === 'china') {
geo.regions.push(new Region(
'南海诸岛', points, geoCoord
将geo.map ===’china’ 改为 ‘china1’即可（不推荐，原因见标题）
思路二：后台传递数据的时候将南海诸岛手动的添加到json中，赋值为0，然后echarts中进行判断，达到同样的效果，区域置灰，但是还会出现在地图上。
itemStyle: {
show: true,
formatter:function(params){
console.log(params);
if(params.name == '南海诸岛' || params.name == '台湾' || params.name == '澳门' || params.name == '香港'){
return " ";
return params.name+"\r\n"+params.value;
本文已收录于以下专栏：
相关文章推荐
修改前后对照在Echarts官网下载全国地图的插件，显示的位置可能会有点偏差，透过现象看本质，显示名称的定位本质上是取的地理坐标的经纬度。
我们打开china.js文件前面的匿名函数在加载的时候进行...
echarts地图扩展文件使用geoJson格式。
1、在线生成
http://ecomfe.github.io/echarts-map-tool/ &#160;这里可以生成省市区的json，但是最多生成到...
echarts 地图
小白今天测试将百度的地图导入到项目中，但是只显示南海诸岛……就像这样~~
度娘找了很多解决方案，最后发现原因是eharts3 不再内置地图文件，因此需要我们手动引入官网的js或者json文件（http...
echart3地图隐藏南海诸岛 echart地图隐藏南海诸岛
1.引入echarts库文件
2.在页面中新建div用于地图展示
3.在页面中引入js文件
4.在js脚本中编写代码
$(function() {
// 路径配置...
对于利用坐标系打散点的图形，有时需要给背景地图即geo上色，但是echart并没有提供直接的方法，本文以世界地图为例进行背景上色。
本文参考：/editor.html?c=xrJlpbBQSZ废话不多说了，直接上HTML源码
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)