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 用户注册时的应用实例

    AJAX 用户注册时的应用实例

    我所举的这个例子是一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。
    2008-12-12
  • MUi框架ajax请求WebService接口实例

    MUi框架ajax请求WebService接口实例

    下面小编就为大家分享一篇MUi框架ajax请求WebService接口实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • js ajax加载时的进度条代码

    js ajax加载时的进度条代码

    在web页面中使用ajax加载进度条,可以让用户预先判断等待的时间,而且还可以减少用户等待信息加载过程中的心理焦虑感,所以进度条加载必不可少,下面小编给大家介绍ajax加载进度条代码是如何实现的
    2015-10-10
  • Ajax象棋演示和并提供代码下载

    Ajax象棋演示和并提供代码下载

    Ajax象棋提供,与asp.net结合
    2008-07-07
  • AJAX跨域请求数据的四种方法(实例讲解)

    AJAX跨域请求数据的四种方法(实例讲解)

    下面小编就为大家带来一篇AJAX跨域请求数据的四种方法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 开始研究Ajax. 第一天

    开始研究Ajax. 第一天

    开始研究Ajax. 第一天...
    2006-06-06
  • 利用H5特性FormData实现不刷新文件上传

    利用H5特性FormData实现不刷新文件上传

    之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种JS库,附带多图上传,预览,甚至是图片处理等特技。下面看小编给大家分享的利用H5特性FormData实现不刷新文件上传,非常实用,小伙伴一起来看看吧
    2015-09-09
  • javascript ajax功能函数

    javascript ajax功能函数

    javascript ajax功能函数,没用过的朋友看看代码,应该会有点收获。
    2009-12-12
  • ajax 缓存 问题 requestheader

    ajax 缓存 问题 requestheader

    在web开发的时候经常需要用到ajax,但是有些问题往往会被忽略,如果提交后需要在服务端做一些后台操作的话因为浏览器默认状态下有缓存的原因,可能页面上的信息还是正确的,但是后台的逻辑代码却没有真正的更新。
    2010-02-02
  • ajax 异步获取数据实现代码 (js创建ajax对象)

    ajax 异步获取数据实现代码 (js创建ajax对象)

    ajax实现异步获取数据代码,非常不错,大家可以参考下,这个是应用于用户名的实时监测。
    2009-11-11

最新评论