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会获得这个对象。
public String getAllPower() { HttpServletRequest request = ServletActionContext.getRequest(); HttpServletResponse response = ServletActionContext.getResponse(); try { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e) { // TODO Auto-generated catch block e.printStackTrace(); } List<Power> powers = powerCompareService.getAllPower(); // 获取实际电量和计划电量 List actualPowerList = new ArrayList(); List expectedPowerList = new ArrayList(); for (Power power : powers) { actualPowerList.add(power.getActualPower()); expectedPowerList.add(power.getExpectedPower()); } List<List> merge = new ArrayList(); merge.add(actualPowerList); merge.add(expectedPowerList); JSONArray jsonArray = JSONArray.fromObject(merge); try { response.setHeader("Cache-Control", "no-cache"); response.setContentType("aplication/json;charset=UTF-8"); response.getWriter().print(jsonArray); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } // request.setAttribute("list_powers", powers); // return "success"; return null; }注意须要return null;由于不希望struts导航到其它的地方,而是通过JQuery Ajax来请求。
3JQueryAjax请求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个数据。
详细參考參数例如以下:
url: 要求为String类型的參数,(默觉得当前页地址)发送请求的地址。
type:要求为String类型的參数。请求方式(post或get)默觉得get。注意其它http请求方法。比如put和
timeout:要求为Number类型的參数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设
async:要求为Boolean类型的參数,默认设置为true。全部请求均为异步请求。
cache:要求为Boolean类型的參数,默觉得true(当dataType为script时,默觉得false)。
data: 要求为Object或String类型的參数,发送到server的数据。假设已经不是字符串,将自己主动转换为字符串格
dataType:要求为String类型的參数,预期server返回的数据类型。假设不指定,JQuery将自己主动依据http包mime
beforeSend:要求为Function类型的參数,发送请求前能够改动XMLHttpRequest对象的函数,比如加入自己定义
complete:要求为Function类型的參数,请求完毕后调用的回调函数(请求成功或失败时均调用)。
success:要求为Function类型的參数。请求成功后调用的回调函数,有两个參数。
error:要求为Function类型的參数。请求失败时被调用的函数。该函数有3个參数,即XMLHttpRequest对象、错
contentType:要求为String类型的參数,当发送信息至server时,内容编码类型默认
dataFilter:要求为Function类型的參数,给Ajax返回的原始数据进行预处理的函数。
函数返回的值将由jQuery进一步处理。
global:要求为Boolean类型的參数,默觉得true。
表示是否触发全局ajax事件。
设置为false将不会触发全局
ifModified:要求为Boolean类型的參数,默觉得false。仅在server数据改变时获取新数据。
jsonp:要求为String类型的參数,在一个jsonp请求中重写回调函数的名字。
"这样的GET或POST请求中URL參数里的"callback"部分,比如
username:要求为String类型的參数,用于响应HTTP訪问认证请求的用户名。
password:要求为String类型的參数,用于响应HTTP訪问认证请求的密码。
processData:要求为Boolean类型的參数。默觉得true。默认情况下,发送的数据将被转换为对象(从技术角度
scriptCharset:要求为String类型的參数,仅仅有当请求时dataType为"jsonp"或者"script"。而且type是GET时
4 ECharts
ECharts中的图表数据填充就是Array()对象。
data:actualPower,
这里直接填充了JSON传递过来的数据。
5显示效果图
版权声明:本文博客原创文章,博客,未经同意,不得转载。