Ajax获取到数据放入echarts里不显示的原因分析及解决办法

 更新时间:2016年01月13日 15:43:54   作者: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.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里获取到的数据始终是空的。

相关文章

  • ajax的两种提交方式(get/post)和两种版本

    ajax的两种提交方式(get/post)和两种版本

    本篇也用encodeURI对字符串做了加密,并在类里做了解码,其中需要一些注意的地方在源码里做了注释。get/post两种提交方式,但get提交容易乱码,一定多加注意
    2013-09-09
  • Ajax 核心框架函数及例子

    Ajax 核心框架函数及例子

    最近学习js,肯定会学到ajax中的东西,所以,看到比较好的ajax函数,免不得要贴出来,供大家参考。这个函数摘录自john resig的书中。
    2009-09-09
  • AJAX开发简略 (第二部分)

    AJAX开发简略 (第二部分)

    这篇文章主要给大家介绍了关于AJAX开发简略 (第二部分)的相关资料,需要的朋友可以参考下
    2006-12-12
  • Ajax基础教程之封装(三)

    Ajax基础教程之封装(三)

    这篇文章给大家介绍ajax基础教程之封装的知识,本文通过实例给大家详细介绍,非常不错,感兴趣的朋友一起学习吧
    2016-06-06
  • ajax中的async属性值之同步和异步及同步和异步区别

    ajax中的async属性值之同步和异步及同步和异步区别

    在Jquery中ajax方法中async用于控制同步和异步,当async值为true时是异步请求,当async值为fase时是同步请求。ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据。
    2015-10-10
  • ajax视频课件 在线观看地址

    ajax视频课件 在线观看地址

    ajax视频课件 在线观看地址...
    2007-05-05
  • ajax中用josnp接收josn数据的实现方法

    ajax中用josnp接收josn数据的实现方法

    下面小编就为大家分享一篇ajax中用josnp接收josn数据的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • iframe实现Ajax文件上传效果示例

    iframe实现Ajax文件上传效果示例

    Ajax文件上传效果实现的方法有很多,在本文将为大家介绍下使用iframe是如何实现的,感兴趣的朋友不要错过
    2013-12-12
  • 如何封装一个Ajax函数

    如何封装一个Ajax函数

    这篇文章主要介绍了如何封装一个Ajax函数,帮助大家更好的理解和学习网络编程,感兴趣的朋友可以了解下
    2021-05-05
  • javascript 拖动_cookie_ajax等

    javascript 拖动_cookie_ajax等

    比较实用的js拖动效果代码。类的写法不错,是个不错的应用
    2008-06-06

最新评论