在Echarts的官网上：http://echarts.baidu.com/index.html有比较详细的教程和各种文档，还有每种图形的使用实力。对于官网上有的内容就不做过多的描述了。主要还是来记录在使用这个插件动态显示数据时所遇到的问题。
需求：饼图数据查询条件有两个：时间范围和屏幕，在点击“查询”按钮以后将查询条件传入后台，从数据库搜索到需要的数据并进行处理后，返回给前端页面，用Echarts中的饼状图进行显示
如图所示：
遇到的问题：
1、因为数据是动态的，在改变搜索条件点击搜索按钮后数据动态改变，所以首先想到的就是给搜索按钮添加点击的监听事件，并在事件中使用ajax将序列化后的表单数据（搜索条件）传入到后台相应的action中（该项目使用SSH框架），并在该action中根据搜索条件从数据库中获取需要的数据，将数据进行处理后以Json的格式传到前端。前面的这些都实现了，但是因为ajax是异步传输，获取的值无法赋给该ajax外的变量（异步，不等赋值即进行后面的操作），于是网上各种搜索，网上最多的方法是说将ajax中的参数async设置为false，即将异步改为同步。
2、虽然在前端页面获取了数据，但是因为是在按钮点击以后才会进行数据的前后端传送，所以就将饼图的设置函数写在了按钮的监听事件中，但是饼图只是一闪而过。但如果放在按钮的监听事件外，并不会按照想要的顺序先获取数据再画图，所以这个方法并不可取，所以就想到了另一个方法：点击搜索按钮后进入另一个页面，将参数和获取的数据一并传入另一个页面中，在页面初始化时就能获取相应的数据并画出饼图。
3、但是在按钮的监听事件中调用带页面跳转的action并不能获得想要的效果--页面并不会跳转。网上搜索的很多方法，也没能解决。后来就参考了登录界面的跳转，将表单数据提交的同时进行页面跳转。
相关代码如下：
<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();
}
}
在跳转的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<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;
})()
}]
});
});
注：完整的jsp页面在getPieData.zip压缩包中。