當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2025/3/17 javascript 23 豆豆

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

為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

????基于SpringMVC進(jìn)行ECharts動(dòng)態(tài)實(shí)時(shí)數(shù)據(jù)展示，ECharts的官網(wǎng)示例是前端的js動(dòng)態(tài)隨機(jī)數(shù)據(jù)，沒有與后端程序進(jìn)行交互，由于本人之前對(duì)Spring MVC和ajax不太了解，所以，走了很多彎路，通過(guò)這部分的學(xué)習(xí)，讓自己對(duì)MVC架構(gòu)和簡(jiǎn)單的ajax有了初步的了解，下面就記錄一下自己搭建的這部分程序。

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

????接下來(lái)就是需要將echarts的相關(guān)代碼寫入到一個(gè)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>動(dòng)態(tài)數(shù)據(jù)圖表展示</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?//異步加載的回調(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?:?"未來(lái)一周氣溫變化",?subtext?:?"純屬虛構(gòu)",?sublink?:?"http://www.baidu.com"?},?tooltip?:?{?show:?true,trigger?:?'axis'?},?legend?:?{?data?:?[?"測(cè)試"?]?},?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計(jì)算平均值會(huì)出錯(cuò)?markPoint?:?{?data?:?[{type?:?'max',?name?:?'最大值'},{type?:?'min',??name?:?'最小值'}]?},?markLine?:?{?data?:?[{type?:?'average',?name?:?'平均值'}]?}?}?]?};?myChart.setOption(options);?//先把可選項(xiàng)注入myChart中?myChart.hideLoading();timeId?=?setInterval("getChartData();",2000);//getChartData();//aja后臺(tái)交互??}?</script>?<script?type="text/javascript">?function?getChartData()?{?//獲得圖表的options對(duì)象?var?options?=?myChart.getOption();?//通過(guò)Ajax獲取數(shù)據(jù)?$.ajax({?type?:?"post",?async?:?false,?//同步執(zhí)行?url?:?"getDynmicLineData.do",?data?:?{},?dataType?:?"json",?//返回?cái)?shù)據(jù)形式為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("不好意思，大爺，圖表請(qǐng)求數(shù)據(jù)失敗啦!");?myChart.hideLoading();?}?});?}?</script>?</body>?</html>

????

其中g(shù)etChartData函數(shù)中主要是ajax的請(qǐng)求交互代碼部分，url : "getDynmicLineData.do"代碼是在調(diào)用getChartData函數(shù)時(shí)，ajax向后端程序所請(qǐng)求的URL，通過(guò)spring的配置，在控制類controller中進(jìn)行設(shè)置@RequestMapping，來(lái)匹配動(dòng)態(tài)響應(yīng)的代碼。

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?{//域名訪問(wèn)跳轉(zhuǎn)到登錄頁(yè)@RequestMapping("/")???public?String?index(){???return?"login";???}//登錄跳轉(zhuǎn)到首頁(yè)@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;}//???????//獲取動(dòng)態(tài)信息@RequestMapping(value="/getDynmicLineData.do")@ResponseBody?//添加該注釋后，返回值將由轉(zhuǎn)換器進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換器為Jackson，所以會(huì)轉(zhuǎn)換成json格式public?EchartData?getDynmicLineData()?{?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)?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;?}? }

????至此，就完成了整個(gè)的數(shù)據(jù)交互的過(guò)程，前端javascript定時(shí)調(diào)用js函數(shù)，js函數(shù)中包含ajax動(dòng)態(tài)請(qǐng)求代碼，其中的url匹配到后端的controller類中的@RequestMapping，然后通過(guò)return進(jìn)行數(shù)據(jù)向前端發(fā)送，進(jìn)而展示，以達(dá)到動(dòng)態(tài)實(shí)時(shí)展示的目的。

轉(zhuǎn)載于:https://my.oschina.net/drl/blog/491042

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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