當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

基于Spring MVC的ECharts动态数据实时展示

發布時間：2025/3/17 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Spring MVC的ECharts动态数据实时展示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

為什么80%的碼農都做不了架構師？>>> ??

????基于SpringMVC進行ECharts動態實時數據展示，ECharts的官網示例是前端的js動態隨機數據，沒有與后端程序進行交互，由于本人之前對Spring MVC和ajax不太了解，所以，走了很多彎路，通過這部分的學習，讓自己對MVC架構和簡單的ajax有了初步的了解，下面就記錄一下自己搭建的這部分程序。

????首先需要配置web.xml，設置好servlet和filter，這部分可以參考眾多spring示例，這里就不贅述了。

????接下來就是需要將echarts的相關代碼寫入到一個jsp文件，代碼如下：

<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>?<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">?<html>?<head>?<title>line</title>?<script?src="plugin/echarts.js"></script><script?src="plugin/jquery-1.8.2.min.js"></script></head>?<body>?<h1>動態數據圖表展示</h1>?<div?id="main"?style="height:400px"></div>?<script?type="text/javascript"?language="javascript">?var?myChart;?var?eCharts;?require.config({?paths?:?{?'echarts'?:?'plugin'?,?}?});?require(?[?'echarts',??'echarts/chart/line','echarts/chart/bar'],?DrawEChart?//異步加載的回調函數繪制圖表?);?//創建ECharts圖表方法?function?DrawEChart(ec)?{?eCharts?=?ec;?myChart?=?eCharts.init(document.getElementById('main'));?myChart.showLoading({?text?:?"圖表數據正在努力加載..."?});?//定義圖表options?var?options?=?{?title?:?{?text?:?"未來一周氣溫變化",?subtext?:?"純屬虛構",?sublink?:?"http://www.baidu.com"?},?tooltip?:?{?show:?true,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?:?[?1,?11,?18,?11,?15,?11,?8?],//必須是Integer類型的,String計算平均值會出錯?markPoint?:?{?data?:?[{type?:?'max',?name?:?'最大值'},{type?:?'min',??name?:?'最小值'}]?},?markLine?:?{?data?:?[{type?:?'average',?name?:?'平均值'}]?}?}?]?};?myChart.setOption(options);?//先把可選項注入myChart中?myChart.hideLoading();timeId?=?setInterval("getChartData();",2000);//getChartData();//aja后臺交互??}?</script>?<script?type="text/javascript">?function?getChartData()?{?//獲得圖表的options對象?var?options?=?myChart.getOption();?//通過Ajax獲取數據?$.ajax({?type?:?"post",?async?:?false,?//同步執行?url?:?"getDynmicLineData.do",?data?:?{},?dataType?:?"json",?//返回數據形式為jsonsuccess?:?function(result)?{?if?(result)?{?options.legend.data?=?result.legend;?options.xAxis[0].data?=?result.category;?options.series[0].data?=?result.series[0].data;?//alert(options.series[0].data);myChart.hideLoading();myChart.setOption(options);?}?},?error?:?function(errorMsg)?{?alert("不好意思，大爺，圖表請求數據失敗啦!");?myChart.hideLoading();?}?});?}?</script>?</body>?</html>

????

其中getChartData函數中主要是ajax的請求交互代碼部分，url : "getDynmicLineData.do"代碼是在調用getChartData函數時，ajax向后端程序所請求的URL，通過spring的配置，在控制類controller中進行設置@RequestMapping，來匹配動態響應的代碼。

Controller類的代碼如下：

package?controller; import?java.util.ArrayList; import?java.util.Arrays; import?java.util.HashMap; import?java.util.List; import?java.util.Map; import?java.util.Random; import?org.springframework.stereotype.Controller; import?org.springframework.web.bind.annotation.RequestMapping; import?org.springframework.web.bind.annotation.RequestMethod; import?org.springframework.web.bind.annotation.ResponseBody; import?org.springframework.web.servlet.ModelAndView; import?service.PersonService; import?entity.EchartData; import?entity.Person; import?entity.Series; @Controller public?class?LoginController?{//域名訪問跳轉到登錄頁@RequestMapping("/")???public?String?index(){???return?"login";???}//登錄跳轉到首頁@RequestMapping(value="/login",method?=?RequestMethod.POST)public?ModelAndView?login(String?nickname){ModelAndView?mv?=?new?ModelAndView();mv.setViewName("home/index");mv.addObject("nickname",nickname);return?mv;}//???????//獲取動態信息@RequestMapping(value="/getDynmicLineData.do")@ResponseBody?//添加該注釋后，返回值將由轉換器進行轉換，轉換器為Jackson，所以會轉換成json格式public?EchartData?getDynmicLineData()?{?List<String>?legend?=?new?ArrayList<String>(Arrays.asList(new?String[]{"最高氣溫"}));//數據分組?List<String>?category?=?new?ArrayList<String>(Arrays.asList(new?String?[]{"周一","周二","周三","周四","周五","周六","周日"}));//橫坐標?List<Series>?series?=?new?ArrayList<Series>();//縱坐標?Random?random?=?new?Random();int?rand?=?random.nextInt();ArrayList<Long>?temp?=?new?ArrayList<>();for?(int?i?=?0;?i?<?7;?i++)?{rand?=?Math.abs(random.nextInt()%50);temp.add((long)?rand);}series.add(new?Series("最高氣溫",?"line",?temp));?EchartData?data=new?EchartData(legend,?category,?series);?return?data;?}? }

????至此，就完成了整個的數據交互的過程，前端javascript定時調用js函數，js函數中包含ajax動態請求代碼，其中的url匹配到后端的controller類中的@RequestMapping，然后通過return進行數據向前端發送，進而展示，以達到動態實時展示的目的。

轉載于:https://my.oschina.net/drl/blog/491042

總結

以上是生活随笔為你收集整理的基于Spring MVC的ECharts动态数据实时展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：将银行读卡设备读取到的身份证头像Bitm
下一篇：关于Jquery EasyUI中的Dat