標籤：
本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641 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傳遞過來的資料。
5.顯示
ECharts SSH+JQueryAjax+Json+JSP將資料庫中資料填充到ECharts中
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
