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

阅读:397 2019-03-19 14:40:07 来源:开源中国

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

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

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

<%@pagelanguage="java"import="java.util.*"pageencoding="utf-8"%>line

动态数据图表展示

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:"图表数据正在努力加载..."});//定义图表optionsvaroptions={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后台交互}functiongetchartdata(){//获得图表的options对象varoptions=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();}});}

其中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;@controllerpublicclasslogincontroller{//域名访问跳转到登录页@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(){listlegend=newarraylist(arrays.aslist(newstring[]{"最高气温"}));//数据分组listcategory=newarraylist(arrays.aslist(newstring[]{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标listseries=newarraylist();//纵坐标randomrandom=newrandom();intrand=random.nextint();arraylisttemp=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进行数据向前端发送,进而展示,以达到动态实时展示的目的。

相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>
推荐商标

{{ v.name }}

{{ v.cls }}类

立即购买 联系客服