echarts折线图动态显示+layui时间控件查询某时间段折线图

本文链接：https://blog.youkuaiyun.com/fjzzpljj/article/details/105580541

本文展示了如何使用Echarts创建动态显示的折线图，并结合layui的时间控件，实现查询特定时间段的数据。通过temperature.jsp、temperature.js、TemperatureController类和TemperatureServiceImpl中的方法，实现了数据的展示和查询功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最后结果如下图所示：

话不多说，直接上代码

temperature.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	response.setHeader("Pragma", "no-cache");
	response.addHeader("Cache-Control", "must-revalidate");
	response.addHeader("Cache-Control", "no-cache");
	response.addHeader("Cache-Control", "no-store");
	response.setDateHeader("Expires", 0);
%>
<title>XX远程维护系统</title>
<!--js全局变量，权限管理start-->
<script type='text/javascript'>
	var basePath = '<%=basePath%>';
		(function(){ 
		    USER_SESSION = <%=session.getAttribute("BACKEND_SESSION_USER_KEY")%>;
		    BACKEND_SESSION_USER_AREA_KEY = <%=session.getAttribute("BACKEND_SESSION_USER_AREA_KEY")%>;
		    if(USER_SESSION == null){
		        window.location.href = "<%=basePath%>" + "resources/backendLogin.jsp";
		}
	})();

	var isDeleteState = '0';

	var login_Account = {
		loginAccount : USER_SESSION.username
	};

	var isYes = 'No';

	var MyDataStatic;

	var textData;
</script>
<!--js全局变量，权限管理end-->
<script src="../resources/temperature/temperature.js"></script>
</head>
<body>
	<c:choose>
		<c:when test="${sessionScope.UserRole==0 }">
			<div class="demoTable">
				<!-- 设备ID： -->
				<form class="layui-form">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">设备ID</label>
							<div class="layui-input-inline">
								<select name="SelectEquipmentID" id="SelectEquipmentID"
									lay-verify="required" lay-search=""
									lay-filter="SelectEquipmentID">
									<option value="">请选择设备ID</opt