1、ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
ajax的同步。这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个ajax执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个ajax代码运行中的时候其他代码一样可以运行。
jQuery的async：false，这个属性。默认是true：异步；false：同步。
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
1 var data1={ "result": [
2 {value: 21145381, name: "数量1"},
3 {value: 8186053, name: "数量2"},
4 {value: 316698, name: "数量3"},
5 ]
6 };
7
8 //柱状图，data1是json格式传进去的
9 function barChart(data1, chart, name) {
10
11 /* var dataList = data1.result;
12 var xlabel = [];
13 var yvalue = [];
14 $(dataList).each(function(i, item) {
15 xlabel.push(dataList[i].name);
16 yvalue.push(dataList[i].value);
17 }); */
18
19 //console.log(xlabel);
20 //console.log(yvalue);
21
22 var xlabel_2 = ["数量1", "数量2", "数量3"];
23 var yvalue_2 = new Array();
24 var applies = new Array();
25 var url = 'dataxxxAction!findDataxxx.action';
26 $.ajax({
27 type : 'POST',
28 url : url,
29 dataType : 'json',
30 async : false,//ajax同步
31 success : function(data) {
32 applies = data.result;
33 var length = applies.length;
34 //......处理操作
35 }
36 }
37 });
38
39 console.log(xlabel_2);
40 console.log(yvalue_2);
41
42 // 柱状图
43 var memoryOption = {
44 tooltip : {
45 trigger : 'axis',
46 axisPointer : { // 坐标轴指示器，坐标轴触发有效
47 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
48 },
49 formatter : function(params) {
50 var relVal = params[0].seriesName + "<br/>";
51 relVal += params[0][1] + ' : ' + params[0].data + "<br/>";
52 return relVal;
53 },
54 position : [ 3, 3 ]
55 },
56 grid : {
57 x : '85',
58 y : '30',
59 x2 : '20',
60 y2 : '30',
61 borderWidth : '0'
62 },
63 legned : {
64 borderColor : 'rgb(18,60,112)',
65 },
66 xAxis : [ {
67 type : 'category',
68 data : xlabel_2,
69 axisTick : {
70 alignWithLabel : true
71 },
72 axisLabel : {
73 textStyle : {
74 color : 'rgb(164,176,191)',
75 fontSize : '10'
76 }
77 },
78 splitLine : {
79 show : false,
80 }
81 } ],
82 yAxis : [ {
83 type : 'value',
84 axisLabel : {
85 textStyle : {
86 color : 'rgb(164,176,191)',
87 fontSize : '13'
88 }
89 },
90 splitLine : {
91 show : false,
92 }
93 } ],
94 series : [ {
95 name : name,
96 type : 'bar',
97 data : yvalue_2,
98 barWidth : '30',
99 itemStyle : {
100 normal : {
101 color : (function() {
102 var zrColor = require('zrender/tool/color');
103 return zrColor.getLinearGradient(0, 400, 0, 300, [
104 [ 0, 'rgb(96,188,227)' ],
105 [ 1, 'rgb(96,188,227)' ] ])
106 })(),
107 label : {
108 show : true,
109 formatter : function(params) {
110 if (params.data == '80.01') {
111 params.data = '80';
112 }
113 var relVal = params.data;
114 return relVal;
115 },
116 textStyle : {
117 fontSize : '16'
118 },
119 position : 'top'
120 }
121 }
122 },
123 } ]
124 };
125 chart.setOption(memoryOption, true);
126 }
我是这样搞的报表，但是呢，一开始使用的异步，这就出现这个问题了，首先它是代码一起运行，导致运行了初始值0，报表只显示了气泡，不显示报表数据，搞了一天才发现，使用chrome的f12分析，开始都没有意识到，先执行了一遍是空的，但是又执行了一遍数据的，最后还是没有数据填充报表。最后才发现问题，使用了ajax同步才搞定。使用json预定义的数据是有的，报表正常分析了好久，记录一下。方便以后查询原因。
待续.....
