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

登录注册

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

来源:开源中国
更新日期:2018-03-24

摘要：摘要: ECharts动态实时数据展示

基于SpringMVC进行ECharts动态实时数据展示，ECharts的官网示例是前端的js动态随机数据，没有与后端程序进行交互，由于本人之前对Spring MVC和ajax不太了解，所以，走了很多弯路，通过这部分的学习，让自己对MVC架构和简单的ajax有了初步的了解，下面就记录一下自己搭建的这部分程序。

首先需要配置web.xml，设置好servlet和filter，这部分可以参考众多spring示例，这里就不赘述了。

接下来就是需要将echarts的相关代码写入到一个jsp文件，代码如下：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>line</title> <scriptsrc="plugin/echarts.js"></script> <scriptsrc="plugin/jquery-1.8.2.min.js"></script> </head> <body> <h1>动态数据图表展示</h1>  <divid="main"style="height:400px"></div> <scripttype="text/javascript"language="javascript"> varmyChart; vareCharts; require.config({ paths:{ \'echarts\':\'plugin\', } }); require( [\'echarts\', \'echarts/chart/line\', \'echarts/chart/bar\' ],DrawEChart//异步加载的回调函数绘制图表 ); //创建ECharts图表方法 functionDrawEChart(ec){ eCharts=ec; myChart=eCharts.init(document.getElementById(\'main\')); myChart.showLoading({ text:"图表数据正在努力加载..." }); //定义图表options varoptions={ 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> <scripttype="text/javascript"> functiongetChartData(){ //获得图表的options对象 varoptions=myChart.getOption(); //通过Ajax获取数据 $.ajax({ type:"post", async:false,//同步执行 url:"getDynmicLineData.do", data:{}, dataType:"json",//返回数据形式为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; //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类的代码如下：

packagecontroller; importjava.util.ArrayList; importjava.util.Arrays; importjava.util.HashMap; importjava.util.List; importjava.util.Map; importjava.util.Random; importorg.springframework.stereotype.Controller; importorg.springframework.web.bind.annotation.RequestMapping; importorg.springframework.web.bind.annotation.RequestMethod; importorg.springframework.web.bind.annotation.ResponseBody; importorg.springframework.web.servlet.ModelAndView; importservice.PersonService; importentity.EchartData; importentity.Person; importentity.Series; @Controller publicclassLoginController{ //域名访问跳转到登录页 @RequestMapping("/") publicStringindex(){ return"login"; } //登录跳转到首页 @RequestMapping(value="/login",method=RequestMethod.POST) publicModelAndViewlogin(Stringnickname){ ModelAndViewmv=newModelAndView(); mv.setViewName("home/index"); mv.addObject("nickname",nickname); returnmv; } ////获取动态信息 @RequestMapping(value="/getDynmicLineData.do") @ResponseBody//添加该注释后，返回值将由转换器进行转换，转换器为Jackson，所以会转换成json格式 publicEchartDatagetDynmicLineData(){ List<String>legend=newArrayList<String>(Arrays.asList(newString[]{"最高气温"}));//数据分组 List<String>category=newArrayList<String>(Arrays.asList(newString[]{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标 List<Series>series=newArrayList<Series>();//纵坐标 Randomrandom=newRandom(); intrand=random.nextInt(); ArrayList<Long>temp=newArrayList<>(); for(inti=0;i<7;i++){ rand=Math.abs(random.nextInt()%50); temp.add((long)rand); } series.add(newSeries("最高气温","line",temp)); EchartDatadata=newEchartData(legend,category,series); returndata; } }

至此，就完成了整个的数据交互的过程，前端javascript定时调用js函数，js函数中包含ajax动态请求代码，其中的url匹配到后端的controller类中的@RequestMapping，然后通过return进行数据向前端发送，进而展示，以达到动态实时展示的目的。