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

  • 作者:未知
  • 来源:开源中国
  • 2018-03-04 01:15:25

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

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

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

6.jpg

接下来就是需要将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> <!--为ECharts准备一个具备大小(宽高)的Dom--> <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进行数据向前端发送,进而展示,以达到动态实时展示的目的。

 

免责声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,请发送邮件至:operations@xinnet.com进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

免费咨询获取折扣