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

其他 2020-04-18 11:24:03 阅读次数: 0

最后结果如下图所示：

 话不多说，直接上代码

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>配电房远程维护系统</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</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">开始时间:</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" id="startTime"
									placeholder="请输入开始时间">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">结束时间:</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" id="endTime"
									placeholder="请输入结束时间">
							</div>
						</div>
						<div class="layui-inline">
							<a class="layui-btn" href="#" onclick="searchByTime()">查询</a>
						</div>
					</div>
				</form>
			</div>
			<!-- 显示折线图 -->
			<div id="AdminVision" style="width: 100%; height: 400px;"></div>
		</c:when>
		<c:otherwise>
			<!-- 显示折线图 -->
			<div id="OrdinaryVision" style="width: 100%; height: 400px;"></div>
		</c:otherwise>
	</c:choose>
</body>
</html>

temperature.js

//获取用户
var admin = USER_SESSION.username;
var role = USER_SESSION.role;

//根据时间段，查询温度数据
function searchByTime(){
	var selectEquipment = $("#SelectEquipmentID").val();
	var startTime = $("#startTime").val();
	var endTime = $("#endTime").val();
	loadTemperatureEcharts(selectEquipment,startTime,endTime);
}

// 加载温度折线图
function loadTemperatureEcharts(selectEquipment,startTime,endTime) {
	var myTemperatureChart = echarts.init(document
			.getElementById('AdminVision'));
	// 显示标题，图例和空的坐标轴
	myTemperatureChart.setOption({
		title : {
			text : '温度数据'
		},
		tooltip : {
			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,
		// 设置可缩放
		dataZoom : [ {
			id : 'dataZoomX',
			type : 'slider',
			xAxisIndex : [ 0 ],
			filterMode : 'filter'
		}, {
			id : 'dataZoomY',
			type : 'slider',
			yAxisIndex : [ 0 ],
			filterMode : 'empty'
		} ],
		// 设置结束
		xAxis : {
			type : 'category',
			boundaryGap : false, // 取消左侧的间距
			data : []
		},
		yAxis : {
			type : 'value',
			splitLine : {
				show : false
			},// 去除网格线
			name : '',
			axisLabel: {
	            formatter: '{value} °C'   //设置Y轴，为Y轴添加℃
	        },
		},
		series : [ {
			name : '室内',
			type : 'line',
			symbol : 'emptydiamond', // 设置折线图中表示每个坐标点的符号
			// emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
			data : []
		}, {
			name : '室外',
			type : 'line',
			symbol : 'emptydiamond', // 设置折线图中表示每个坐标点的符号
			// emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
			data : []
		} ]
	});
	myTemperatureChart.showLoading(); // 数据加载完之前先显示一段简单的loading动画
	var time = [];    //类别数组（实际用来盛放X轴坐标值）    
    var indoor = [];  //室内数据
    var outdoor = [];  //室外数据
    
    if(selectEquipment != "" && startTime == "" && endTime == ""){
    	 //请求数据
        $.ajax({
    		url : basePath
    				+ 'Temperature/getTemperatureData.action',
    		async : false,
    		cache : true,
    		dataType : 'json',
    		type : 'GET',
    		data : {
    			equipmentID : selectEquipment
    		},
    		success : function(data) {
    			// 请求成功时执行该函数内容，result即为服务器返回的json对象
    			for(i = 0; i < data.length; i++){
    				time.push(data[i].time);
    				indoor.push(data[i].inTemperature);
    				outdoor.push(data[i].outTemperature);
    			}
    			myTemperatureChart.hideLoading(); // 隐藏加载动画
    			myTemperatureChart.setOption({ // 加载数据图表
    				xAxis : {
    					data : time
    				},
    				series : [ {
    					data : indoor
    				}, {
    					data : outdoor
    				} ]
    			});
    		},
    		error : function() {
    			console.log("温度获取失败！");
    			myTemperatureChart.hideLoading();
    		}
    	});
    }else if(selectEquipment != "" && startTime != "" && endTime != ""){
    	 $.ajax({
     		url : basePath
     				+ 'Temperature/searchByTimeAndEquipmentID.action',
     		async : false,
     		cache : true,
     		dataType : 'json',
     		type : 'GET',
     		data : {
     			equipmentID : selectEquipment,
     			startTime : startTime,
     			endTime : endTime
     		},
     		success : function(data) {
     			// 请求成功时执行该函数内容，result即为服务器返回的json对象
     			for(i = 0; i < data.length; i++){
     				time.push(data[i].time);
     				indoor.push(data[i].inTemperature);
     				outdoor.push(data[i].outTemperature);
     			}
     			//myTemperatureChart.clear();  // 1、清除画布
     			myTemperatureChart.hideLoading(); // 隐藏加载动画
     			myTemperatureChart.setOption({ // 加载数据图表
     				xAxis : {
     					data : time
     				},
     				series : [ {
     					data : indoor
     				}, {
     					data : outdoor
     				} ]
     			});
     		},
     		error : function() {
     			console.log("温度获取失败！");
     			myTemperatureChart.hideLoading();
     		}
     	});
    }
   
}

// 页面加载完请求
$(document).ready(function() {
	// 如果是超级管理员的话,就根据输入的设备ID来显示折线图
	if(role == 0){
		// 获取下拉选框中设备的ID
		layui.use([ 'form', 'upload', 'layer' ], function() {
			var form = layui.form;
			$.ajax({
				url : basePath
						+ '/Temperature/getAllEquipmentID.action',
				async : false,
				cache : true,
				dataType : 'json',
				type : 'POST',
				success : function(data) {
					for (var i = 0; i < data.length; i++) {
						$("#SelectEquipmentID").append(
								"<option value='" + data[i] + "'>"
										+ data[i] + "</option>");
					}
					form.render('select');
				},
				error : function() {
					console.log("设备ID获取失败！！！");
				}
			});
		});
		// 存一级下拉框的值
		var selectEquipment = null;
		
		//定义用于判断
		var world = null;
		
		// 获取一级下拉框的值
		layui.form.on('select(SelectEquipmentID)', function(data) { // 对应lay-filter
			selectEquipment = data.value; // 获取value值
			//如果设备ID不为空时，显示折线图
			if(selectEquipment != world){
				//加载折线图
				loadTemperatureEcharts(selectEquipment,"","");
			}
		});

		layui.use('laydate', function(){
			var laydate = layui.laydate;
			//日期时间选择器
			laydate.render({
			  elem: '#startTime'
			  ,type: 'datetime'
			});
			//日期时间选择器
			laydate.render({
			  elem: '#endTime'
			  ,type: 'datetime'
			});
		});
		
	}else{
		//直接显示用户对应设备的温度数据
	}
});

TemperatureController类：

package com.apt.Linjianji.controller;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.apt.Linjianji.entity.Equipment;
import com.apt.Linjianji.entity.Temperature;
import com.apt.Linjianji.service.EquipmentService;
import com.apt.Linjianji.service.TemperatureService;
import com.apt.Linjianji.utils.TemperatureEchartsUtils;

@Controller
@RequestMapping(value = "/Temperature/*")
public class TemperatureController {

	@Autowired
	private TemperatureService temperatureService;

	@Autowired
	private EquipmentService equipmentService;

	// getTemperatureData.action获取温度数据，并在前端用折线图显示
	@RequestMapping(value = "getTemperatureData.action")
	public @ResponseBody List<TemperatureEchartsUtils> getTemperatureData(
			String equipmentID) {
		List<TemperatureEchartsUtils> temperatureEcharts = new ArrayList<TemperatureEchartsUtils>();
		List<Temperature> list = temperatureService
				.searchByEquipmentID(equipmentID);
		for (int i = list.size() - 1; i >= 0; i--) {
			TemperatureEchartsUtils echarts = new TemperatureEchartsUtils();
			echarts.setInTemperature(list.get(i).getInTemperature());
			echarts.setOutTemperature(list.get(i).getOutTemperature());
			echarts.setTime(list.get(i).getTime());
			temperatureEcharts.add(echarts);
		}
		return temperatureEcharts;
	}

	// getAllEquipmentID,获取所有的设备ID
	@RequestMapping(value = "getAllEquipmentID.action")
	public @ResponseBody Set<String> getAllEquipmentID() {
		Set<String> set = new HashSet<String>();
		List<Equipment> list = equipmentService.getAllEquipmentData();
		for (int i = 0; i < list.size(); i++) {
			set.add(list.get(i).getEquipmentId());
		}
		return set;
	}

	// searchByTimeAndEquipmentID.action限制条件：设备ID、开始时间和结束时间。获取温度数据，并在前端用折线图显示
	@RequestMapping(value = "searchByTimeAndEquipmentID.action")
	public @ResponseBody List<TemperatureEchartsUtils> searchByTimeAndEquipmentID(
			String equipmentID,String startTime,String endTime) throws ParseException {
		//类型转换，String类型转Date类型
		SimpleDateFormat ft = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		Date startDate = ft.parse(startTime);
		Date endDate = ft.parse(endTime);
		//转换结束
		List<TemperatureEchartsUtils> temperatureEcharts = new ArrayList<TemperatureEchartsUtils>();
		List<Temperature> list = temperatureService
				.searchByTimeAndEquipmentID(equipmentID,startDate,endDate);
		for (int i = list.size() - 1; i >= 0; i--) {
			TemperatureEchartsUtils echarts = new TemperatureEchartsUtils();
			echarts.setInTemperature(list.get(i).getInTemperature());
			echarts.setOutTemperature(list.get(i).getOutTemperature());
			echarts.setTime(list.get(i).getTime());
			temperatureEcharts.add(echarts);
		}
		return temperatureEcharts;
	}
}

TemperatureServiceImpl里的两个方法：

// 根据设备ID获取温度对象
	@Override
	public List<Temperature> searchByEquipmentID(String equipmentID) {
		// TODO Auto-generated method stub
		return temperatureMapper.searchByEquipmentID(equipmentID);
	}

	// 根据限制条件开始时间、结束时间和设备ID，查询设备温度对象
	@Override
	public List<Temperature> searchByTimeAndEquipmentID(String equipmentID,
			Date startTime, Date endTime) {
		// TODO Auto-generated method stub
		TemperatureExample example = new TemperatureExample();
		example.or().andEquipmentIdEqualTo(equipmentID)
				.andTimeBetween(startTime, endTime);
		return temperatureMapper.selectByExample(example);
	}

以上只列出主要的代码。

欢迎交流，互相学习。

fjzzpljj
发布了19 篇原创文章 · 获赞 2 · 访问量 6347
私信 关注

猜你喜欢

转载自blog.csdn.net/fjzzpljj/article/details/105580541
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022