ajax致使Echarts不顯示餅圖數據、柱狀圖數據只顯示氣泡的問題。

一、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預約義的數據是有的，報表正常分析了很久，記錄一下。方便之後查詢緣由。

待續.....