1.导入包,搭建SSH框架
导入Jquery的JS包,<script src="JS/jquery.1.7.1.js"></script>
导入ECharts的包。<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
前提你的SSH已经搭好了,数据已经传递到了Struts层。
2.在Action层,将数据封装成JSON对象,并通过ServletResponse对象输出
我的实际功能是讲实际电量数据和计划电量数据显示的Echarts图表上。将实际电量和计划电量均放在ArrayList中,然后将这两个ArrayList放到一个ArrayList中,比如叫merge。之后将merge对象封装到JSONArray中,这时的JSONArray其实存的是两个一位数组,然后将这个JSONArray对象通过Servlet的Response对象输出,请求这个方法的JSP会获得这个对象。
1 public String getAllPower() { 2 HttpServletRequest request = ServletActionContext.getRequest(); 3 HttpServletResponse response = ServletActionContext.getResponse(); 4 try { 5 request.setCharacterEncoding("utf-8"); 6 response.setCharacterEncoding("utf-8"); 7 } catch (UnsupportedEncodingException e) { 8 // TODO Auto-generated catch block 9 e.printStackTrace(); 10 } 11 List<Power> powers = powerCompareService.getAllPower(); 12 // 获取实际电量和计划电量 13 List actualPowerList = new ArrayList(); 14 List expectedPowerList = new ArrayList(); 15 for (Power power : powers) { 16 actualPowerList.add(power.getActualPower()); 17 expectedPowerList.add(power.getExpectedPower()); 18 } 19 List<List> merge = new ArrayList(); 20 merge.add(actualPowerList); 21 merge.add(expectedPowerList); 22 JSONArray jsonArray = JSONArray.fromObject(merge); 23 try { 24 response.setHeader("Cache-Control", "no-cache"); 25 response.setContentType("aplication/json;charset=UTF-8"); 26 response.getWriter().print(jsonArray); 27 } catch (IOException e) { 28 // TODO Auto-generated catch block 29 e.printStackTrace(); 30 } 31 // request.setAttribute("list_powers", powers); 32 // return "success"; 33 return null; 34 }
注意需要return null;因为不希望struts导航到其他的地方,而是通过JQuery Ajax来请求。
3.JqueryAjax请求JSON数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 来自百度CDN --> <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> <script src="JS/jquery-1.7.1.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main1" style="height:400px"></div> <button type="button" id="button1">显示/隐藏</button> <script type="text/javascript"> $(function() { $("#button1").click(function() { $("#main1").slideToggle(999); }); }); var actualPower = new Array(); var expectedPower = new Array(); $.ajax({ url : ‘Power.action‘, type : ‘GET‘, dataType : ‘json‘, async : false, success : function(jsonArray) { for (x in jsonArray[0]) { actualPower[x] = jsonArray[0][x]; } for (x in jsonArray[0]) { expectedPower[x] = jsonArray[1][x]; } } }); // 路径配置 require.config({ paths : { ‘echarts‘ : ‘http://echarts.baidu.com/build/echarts‘, ‘echarts/chart/bar‘ : ‘http://echarts.baidu.com/build/echarts‘ } }); // 使用 require([ ‘echarts‘, ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块,按需加载 ], function(ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById(‘main1‘)); var option = { title : { text : ‘发电量对比‘, subtext : ‘模拟测试‘ }, tooltip : { trigger : ‘axis‘ }, legend : { data : [ ‘逆变器‘, ‘汇流箱‘, ‘发电单元1‘, ‘发电单元2‘ ] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ ‘line‘, ‘bar‘ ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [ { type : ‘category‘, data : [ ‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘, ‘8月‘, ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘ ] } ], yAxis : [ { type : ‘value‘ } ], series : [ { name : ‘逆变器‘, type : ‘line‘, data : actualPower, markPoint : { data : [ { type : ‘max‘, name : ‘最大值‘ }, { type : ‘min‘, name : ‘最小值‘ } ] }, markLine : { data : [ { type : ‘average‘, name : ‘平均值‘ } ] } }, { name : ‘汇流箱‘, type : ‘bar‘, data : actualPower, markPoint : { data : [ { type : ‘max‘, name : ‘最大值‘ }, { type : ‘min‘, name : ‘最小值‘ } ] }, markLine : { data : [ { type : ‘average‘, name : ‘平均值‘ } ] } }, { name : ‘发电单元1‘, type : ‘bar‘, data : actualPower, markPoint : { data : [ { type : ‘max‘, name : ‘最大值‘ }, { type : ‘min‘, name : ‘最小值‘ } ] }, markLine : { data : [ { type : ‘average‘, name : ‘平均值‘ } ] } }, { name : ‘发电单元2‘, type : ‘bar‘, data : expectedPower, markPoint : { data : [ { name : ‘年最高‘, value : 182.2, xAxis : 7, yAxis : 183, symbolSize : 18 }, { name : ‘年最低‘, value : 2.3, xAxis : 11, yAxis : 3 } ] }, markLine : { data : [ { type : ‘average‘, name : ‘平均值‘ } ] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); }); </script> </body>
$.ajax({
url : ‘Power.action‘,
type : ‘GET‘,
dataType : ‘json‘,
async : false,
success : function(jsonArray) {
for (x in jsonArray[0]) {
actualPower[x] = jsonArray[0][x];
}
for (x in jsonArray[0]) {
expectedPower[x] = jsonArray[1][x];
}
}
});
其中 url的参数是请求的action
dataType数据类型选择json
success是请求成功后的返回,jsonArray就是请求成功,上面的Action的方法通过Servlet传递过来的Json对象。二维数组jsonArray[0]直接能获取到第一个封装的ArrayList,而jsonArray[0][x]获取到ArrayList中的第x个数据。4.Echarts
Echarts中的图表数据填充就是Array()对象。
data:actualPower,
这里直接填充了JSON传递过来的数据。