使用Echarts插件画饼状图

最新推荐文章于 2024-01-30 16:29:23 发布

sally_white

最新推荐文章于 2024-01-30 16:29:23 发布

阅读量510

点赞数

分类专栏：我的第一个J2EE项目文章标签： Ajax JavaScript jsonp ViewUI

本文链接：https://blog.csdn.net/sally_white/article/details/84813949

版权

我的第一个J2EE项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Echarts插件动态显示饼状图。在SSH框架下，通过Ajax异步请求，根据时间范围和屏幕条件查询数据，然后处理数据并以Json返回前端。文章讨论了在数据动态变化时遇到的问题，包括异步传输的处理、页面跳转和饼图数据赋值。解决方案包括设置Ajax同步，利用表单提交进行页面跳转，并正确格式化数据以更新Echarts图表。

摘要由CSDN通过智能技术生成

[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]

<form class="form-horizontal" role="form" action="getPieData" id="exactForm">
			<fieldset>
				<legend>查询条件</legend>
			<div class="col-sm-4">
				<div class="input-group input-group-sm" >
					<div class="input-group-addon">时间段</div>
					<input type="text" id="daterange-default" name="timeRange" class="form-control">
					<input type="text" class="hidden" name="startTime" id="startTime">
					<input type="text" class="hidden" name="endTime" id="endTime">
					<input type="text" class="hidden" name="data" id="data">
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
				</div>
			</div>
			<div class="col-sm-3">
					<div class="input-group input-group-sm">
						<div class="input-group-addon">屏幕</div>				
						<select  name="led" id="led" class="form-control">			
						</select>
					</div>
			</div>				
				<div class="col-sm-2">	
					<button class="btn btn-primary btn-sm" id="exactQuery" onclick="query()">查询</button>
					<button class="btn btn-danger btn-sm" id="clearExactForm">清除</button>
				</div>
			</fieldset>
		</form>

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

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

[size=medium]在跳转的action中将结果赋给前端页面的主要代码：[/size]

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

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

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

			});