jsp頁面<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <title>line</title> <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts2.0/esl.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> </head> <body> <!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om --> <div id="main" style="height:400px"></div> <script type="text/javascript" language="javascript"> var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' , 'echarts/chart/line' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' //需要的組件 } }); require( [ 'echarts', 'echarts/chart/line' ], DrawEChart //異步加載的回調(diào)函數(shù)繪制圖表 ); //創(chuàng)建ECharts圖表方法 function DrawEChart(ec) { eCharts = ec; myChart = eCharts.init(document.getElementById('main')); myChart.showLoading({ text : "圖表數(shù)據(jù)正在努力加載..." }); //定義圖表options var options = { title : { text : "未來一周氣溫變化", subtext : "純屬虛構(gòu)", sublink : "http://www.baidu.com" }, tooltip : { trigger : 'axis' }, legend : { data : [ "最高氣溫" ] }, 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', boundaryGap : false, data : [ '1', '2', '3', '4', '5', '6', '7' ] } ], yAxis : [ { type : 'value', axisLabel : { formatter : '{value} °C' }, splitArea : { show : true } } ], grid : { width : '90%' }, series : [ { name : '最高氣溫', type : 'line', data : [ 11, 22, 33, 44, 55, 33, 44 ],//必須是Integer類型的,String計算平均值會出錯 markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, markLine : { data : [ { type : 'average', name : '平均值' } ] } } ] }; myChart.setOption(options); //先把可選項(xiàng)注入myChart中 myChart.hideLoading(); getChartData();//aja后臺交互 } </script> <script type="text/javascript"> function getChartData() { //獲得圖表的options對象 var options = myChart.getOption(); //通過Ajax獲取數(shù)據(jù) $.ajax({ type : "post", async : false, //同步執(zhí)行 url : "${pageContext.request.contextPath}/echarts/line_data", data : {}, dataType : "json", //返回數(shù)據(jù)形式為json success : function(result) { if (result) { options.legend.data = result.legend; options.xAxis[0].data = result.category; options.series[0].data = result.series[0].data; myChart.hideLoading(); myChart.setOption(options); } }, error : function(errorMsg) { alert("不好意思,，大爺，圖表請求數(shù)據(jù)失敗啦!"); myChart.hideLoading(); } }); } </script> </body> </html>
controller
package com.ffcs.wlan.controller; import java.util.ArrayList; import java.util.Arrays; import java.util.List; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.ffcs.wlan.model.EchartData; import com.ffcs.wlan.model.Series; @Controller @RequestMapping("/echarts") public class EntityController { private static final Logger logger = LoggerFactory.getLogger(EntityController.class); @RequestMapping("/line_data") @ResponseBody public EchartData lineData() { logger.info("lineData...."); List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"最高氣溫"}));//數(shù)據(jù)分組 List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//橫坐標(biāo) List<Series> series = new ArrayList<Series>();//縱坐標(biāo) series.add(new Series("最高氣溫", "line", new ArrayList<Integer>(Arrays.asList( 21,23,28,26,21,33,44)))); EchartData data=new EchartData(legend, category, series); return data; } @RequestMapping("/line_page") public String linePage() { logger.info("linePage...."); return "report/line"; } }
Echarts 類
package com.ffcs.wlan.model; import java.util.ArrayList; import java.util.List; public class EchartData { public List<String> legend = new ArrayList<String>();//數(shù)據(jù)分組 public List<String> category = new ArrayList<String>();//橫坐標(biāo) public List<Series> series = new ArrayList<Series>();//縱坐標(biāo) public EchartData(List<String> legendList, List<String> categoryList, List<Series> seriesList) { super(); this.legend = legendList; this.category = categoryList; this.series = seriesList; } }
Series 類
package com.ffcs.wlan.model; import java.util.List; public class Series { public String name; public String type; public List<Integer> data;//這里要用int 不能用String 不然前臺顯示不正常（特別是在做數(shù)學(xué)運(yùn)算的時候） public Series( String name, String type, List<Integer> data) { super(); this.name = name; this.type = type; this.data = data; } }
|
