使用Echarts插件画饼状图

阅读更多

  这两天在做动态报价系统的“行业统计”页面时，需要用到饼状图来显示统计结果。于是用到了Echarts插件，不得不说，这个插件的功能确实很强大，各种图很漂亮，也比较容易上手。

  在Echarts的官网上：http://echarts.baidu.com/index.html有比较详细的教程和各种文档，还有每种图形的使用实力。对于官网上有的内容就不做过多的描述了。主要还是来记录在使用这个插件动态显示数据时所遇到的问题。

需求：饼图数据查询条件有两个：时间范围和屏幕，在点击“查询”按钮以后将查询条件传入后台，从数据库搜索到需要的数据并进行处理后，返回给前端页面，用Echarts中的饼状图进行显示

如图所示：


遇到的问题：

1、因为数据是动态的，在改变搜索条件点击搜索按钮后数据动态改变，所以首先想到的就是给搜索按钮添加点击的监听事件，并在事件中使用ajax将序列化后的表单数据（搜索条件）传入到后台相应的action中（该项目使用SSH框架），并在该action中根据搜索条件从数据库中获取需要的数据，将数据进行处理后以Json的格式传到前端。前面的这些都实现了，但是因为ajax是异步传输，获取的值无法赋给该ajax外的变量（异步，不等赋值即进行后面的操作），于是网上各种搜索，网上最多的方法是说将ajax中的参数async设置为false，即将异步改为同步。

2、虽然在前端页面获取了数据，但是因为是在按钮点击以后才会进行数据的前后端传送，所以就将饼图的设置函数写在了按钮的监听事件中，但是饼图只是一闪而过。但如果放在按钮的监听事件外，并不会按照想要的顺序先获取数据再画图，所以这个方法并不可取，所以就想到了另一个方法：点击搜索按钮后进入另一个页面，将参数和获取的数据一并传入另一个页面中，在页面初始化时就能获取相应的数据并画出饼图。

3、但是在按钮的监听事件中调用带页面跳转的action并不能获得想要的效果--页面并不会跳转。网上搜索的很多方法，也没能解决。后来就参考了登录界面的跳转，将表单数据提交的同时进行页面跳转。
相关代码如下：

			

				
查询条件
			

				

					
时间段
					
					
					
					
					
				
			
			

					

						
屏幕
				
									
						
					
			
				
				
	
					查询
					清除
				
			
		

function frontval() {
	  		if($("#daterange-default").val()=="" ){
	  	  		alert("日期不能为空，请选择日期范围！");
	  	  		return false;
	  	  	}
	  		return true;
		}
		
		function query() {
			if (frontval()) {
				$("#startTime").val(startTime);
				$("#endTime").val(endTime);
				$("#exactForm").submit();
			}	
		}

在跳转的action中将结果赋给前端页面的主要代码：

ActionContext ctx = ActionContext.getContext();
		ctx.put("industryArr",jsonArray1);
		ctx.put("ratios",jsonArray2);

4、数据获取后，接下来是如何将相应的数据以正确的格式赋给饼图（饼图绘制使用的是Echarts官网中教程中的异步数据加载和更新：饼图必须先绘制一遍再进行数据加载），重点在第二段代码中对饼图的赋值方法，同时也要注意在JavaScript中赋给相应Array的数据类型（虽然JavaScript中的var参数是弱类型的）。

var industrys=<%=request.getAttribute("industryArr")%>;
    var industriesJsp=new Array();
    var ratiosJsp=new Array();
    <%String str1=request.getAttribute("industryArr").toString();
      String str2=request.getAttribute("ratios").toString();
      String []industries=str1.split(",");
      String []ratios=str2.split(",");
      int len=ratios.length-1;
      Double []ratiosInt=new Double[len];
      
      for(int j=1;j
         industriesJsp.push(<%=industries[i]%>);
         ratiosJsp.push(<%= ratiosInt[i]%>);
     <% } %>

$(document).ready(function(){
				myChart.setOption({
	  				legend: {
	  	               data:  (function(){
                           var res = [];
                           var len = industriesJsp.length;
                           while (len--) {
                           res.push(industriesJsp[len]);
                           }
                           return res;
                           })()
	  		        },
	  		        series: [{
	  		          name: '占屏率',
	  		          data:(function(){
	  		        	 
                          var res = [];
                          var len = industriesJsp.length;
                          while (len--) {
                          res.push({
                          name: industriesJsp[len],
                          value: ratiosJsp[len]
                          });
                          }
                          return res;
                          })()
	  		        }]
	  		    });	

			});

注：完整的jsp页面在getPieData.zip压缩包中。

• 
• 大小: 56.1 KB

• getPieData.zip (3.5 KB)
• 下载次数: 3

• 查看图片附件