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预定义的数据是有的,报表正常分析了好久,记录一下。方便以后查询原因。

待续.....


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

spring+redis的集成,使用spring-data-redis来集成知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。