使用Echarts插件画饼状图

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

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

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

如图所示：
[img]http://dl2.iteye.com/upload/attachment/0119/4469/9543b424-5b35-354f-b1d4-da0f82d3ca74.png[/img]

[size=medium][b]遇到的问题：[/b][/size]

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

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

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

			

				
查询条件

			
				
					时间段
					
					
					
					
					
				
			
			
					
						屏幕				
									
						
					
							
					
					查询
					清除
				
			

		

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

		function query() {
			if (frontval()) {
				$("#startTime").val(startTime);
				$("#endTime").val(endTime);
				$("#exactForm").submit();
			}	
		}

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

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
    	  ratiosInt[j]=Double.parseDouble(ratios[j]);
      }
      for(int i=1;i
         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;
                          })()
	  		        }]
	  		    });	

			});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！