ECharts顯示後臺傳送的JSON資料
阿新 • • 發佈:2019-01-08
廢話不多說,直接上程式碼:
一、定義一個後臺資料儲存類:
二、將從後臺獲取的資料儲存到JSON裡面:public class BarDTO<T>{ private String name; private String type; private List<T> data; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getType() { return type; } public void setType(String type) { this.type = type; } public List<T> getData() { return data; } public void setData(List<T> data) { this.data = data; } }
public String getTimeChar(){ Map<String, BarDTO<Double>> map = new HashMap<String,BarDTO<Double>>();// 柱狀圖資料 List<Double> inCosts = new ArrayList<Double>(); //投入成本 List<Double> outCosts = new ArrayList<Double>(); //產出成本 List<Double> profits = new ArrayList<Double>(); //利潤 Calendar now= new GregorianCalendar(); int y= now.get(Calendar.YEAR); inCosts = intoService.getInto(y); outCosts = intoService.getOut(y); for (int i = 0; i < 12; i++) { double temp = outCosts.get(i) - inCosts.get(i); if(temp < 0){ profits.add(0.0); }else{ profits.add(temp); } } BarDTO<Double> one = new BarDTO<Double>(); one.setName("投入資金"); one.setType("bar"); one.setData(inCosts); BarDTO<Double> two = new BarDTO<Double>(); two.setName("產出資金"); two.setType("bar"); two.setData(outCosts); BarDTO<Double> three = new BarDTO<Double>(); three.setName("利潤"); three.setType("bar"); three.setData(profits); map.put("inCosts",one); map.put("outCosts",two); map.put("profits",three); return ajaxJsonSuccessMessage("success",map); }
三、介面jsp中顯示操作:// AJAX輸出,返回null public String ajax(String content, String type) { try { HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType(type + ";charset=UTF-8"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.getWriter().write(content); response.getWriter().flush(); } catch (IOException e) { e.printStackTrace(); } return null; } /** * 輸出JSON成功訊息,返回null * 〈功能簡述〉 */ public String ajaxJsonSuccessMessage(String message, Object data) { Map<String, Object> jsonMap = new HashMap<String, Object>(); jsonMap.put("status", SUCCESS); jsonMap.put("message", message); jsonMap.put("data", data); JSONObject jsonObject = JSONObject.fromObject(jsonMap); return ajax(jsonObject.toString(), "text/html"); }
<div id="pieChart" style="height: 400px"></div>
<script type="text/javascript"> /* 路徑配置 */ require.config({ paths: { echarts: '${ctx}/echarts2.2.1/build/source' } }); /* 餅狀圖 Start*/ function showPriChart(){ /*使用 */ require([ 'echarts', 'echarts/chart/bar', // 使用柱狀圖就載入bar模組,按需載入 'echarts/chart/pie', // 使用餅狀圖就載入pie模組,按需載入 'echarts/chart/funnel' ], newShowPeiChart ); } var myChart; var inData = []; //投入 var outData = []; //產出 var proData = []; //利潤 function newShowPeiChart(ec){ $.ajax({ type : "post", url : "${ctx}/toms/highway/getTimeIntoChar.action, dataType : 'json', error : function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); }, success : function(result) { if (result.status == "success") { var inCosts = result.data.inCosts; var outCosts = result.data.outCosts; var profits = result.data.profits; if(inCosts != null){ inData = inCosts; } if(outCosts != null){ outData = outCosts; } if(profits != null){ proData = profits; } } } }); myChart = ec.init(document.getElementById('pieChart'), 'macarons');// 基於準備好的dom,初始化echarts圖表 option = { title : { text: '投入產出資金統計圖' }, tooltip : { trigger: 'axis' }, legend: { data:['投入資金','產出資金','利潤'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: false, type: ['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 : [inData,outData,proData] }; myChart.setOption(option); // 為echarts物件載入資料 }</script>
最後在相應地方呼叫showPriChart()方法即可。