首页 > web前端 > js教程 > Ajax获取到数据放入echarts里不显示的原因分析及解决办法

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

亚连
发布: 2018-05-24 11:25:50
原创
3197 人浏览过

在做一个需要用到echarts地图的项目的时候,成功通过ajax获取到了后台提供的数据,并生成了想要的JSON串。但是,放到echarts option.series[0].data里,获取不到数据。在生成的地图上无法看到你从后台获取到的值,下面我给大家分享我的解决办法,需要的朋友参考下

在做一个需要用到echarts地图的项目的时候,成功通过ajax获取到了后台提供的数据,并生成了想要的JSON串。但是,放到echarts option.series[0].data里,获取不到数据。在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应,给出的答案五花八门,仍旧未解决问题,最后还是一个同事大牛给解决的,在此分享给大家。希望对大家有帮助,,,,

废话不多说,直接上码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

$(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 post请求跳转页面

Ajax提交表单页面刷新很快的解决方法

Ajax打开新窗口被浏览器拦截的两种解决办法

以上是Ajax获取到数据放入echarts里不显示的原因分析及解决办法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
javascript - react中如何使用echarts-gl???
来自于 1970-01-01 08:00:00
0
0
0
javascript - 一个echarts+bootstrap模态框的小坑。
来自于 1970-01-01 08:00:00
0
0
0
javascript - 百度echarts图表如何修改
来自于 1970-01-01 08:00:00
0
0
0
javascript - echarts柱状图渐变色的问题
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板