使用Echarts插件画饼状图

本文介绍了如何使用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;
})()
}]
});

});

[color=red][size=medium]
注:完整的jsp页面在getPieData.zip压缩包中。[/size][/color]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值