基于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>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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", //返回数据形式为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类的代码如下：
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进行数据向前端发送，进而展示，以达到动态实时展示的目的。
时间： 2024-12-06 16:12:18