智慧大棚WEB页面-通过调用ECHARTS动态显示湿度变化

清风竹篱

已于 2023-09-09 07:24:02 修改

阅读量202

点赞数 1

分类专栏：物联网系统文章标签： echarts

于 2023-09-09 07:10:29 首次发布

本文链接：https://blog.csdn.net/m0_46303328/article/details/132772781

版权

物联网系统专栏收录该内容

6 篇文章 1 订阅

订阅专栏

在servlet中查询最近的几十条湿度数据，并发送到前端网页

package mysqlLogin.servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * Servlet implementation class Login
 */
@WebServlet("/HumityShow")
public class HumityShow extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public HumityShow() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");		
		
		String houseId= request.getParameter("houseId");
		if(houseId.contains("6")) {
			houseId = "0006";
		}else {
			houseId = "0001";
		}		
		//System.out.println(houseId);
		
		
		
		String driverMysql = "com.mysql.jdbc.Driver";
		String urlMysql = "jdbc:mysql://localhost:3306/emp?useUnicode=true&characterEncoding=UTF-8&useSSL=false";
		String userNameMysql = "root";
		String passWordMysql = "asdf1234";
		String sql = "select humity from `emp`.`greenhouse`"+ "where houseid = " + houseId + " order by id desc limit 0,20 ";
		ArrayList<Humity> list = new ArrayList<Humity>();
		String gsObject = null;
		boolean t = false;

		try {
			Class.forName(driverMysql);
			Connection conn = DriverManager.getConnection(urlMysql, userNameMysql, passWordMysql);
			PreparedStatement ps = conn.prepareStatement(sql);
			ResultSet rs = ps.executeQuery();
			while(rs.next())
			{
				 //�¶�
				String humity  = rs.getString("humity");
				Humity  humity666 = new Humity(new Double(humity));
				list.add(humity666);
				
			}
        			
			Gson gs = new Gson();
			
			gsObject = gs.toJson(list);
			
			//System.out.println(gsObject);
			rs.close();
			conn.close();
			
			
			  
		} catch (ClassNotFoundException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		response.setContentType("text/html;charset=UTF-8 ");
		response.getWriter().print(gsObject);

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

package mysqlLogin.servlet;

public class Humity {
	double  humity;

	public Humity(double humity) {
		super();
		this.humity = humity;
	}

	 

}

前端页面显示

前端调用echarts显示数据

<!DOCTYPE HTML>
<!--
	Arcana by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>

<head>
	<title>智慧农业</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
	<link rel="stylesheet" href="assets/css/main.css" />
	<link rel="icon" href="images/webicon.png">
	<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
	<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
	<script src="assets/js/echarts.common.js"></script>
	<!-- Scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/jquery.dropotron.min.js"></script>
	<script src="assets/js/skel.min.js"></script>
	<script src="assets/js/util.js"></script>
	<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="assets/js/main.js"></script>
</head>

<body>
	<div id="page-wrapper">

		<!-- Header -->
		<div id="header">

			<!-- Logo -->
			<h1><a href="index.html" id="logo">智慧大棚精准控制系统</a></h1>

			<!-- Nav -->
			<nav id="nav">
						<ul>
							<li ><a href="home.html">总体监控</a></li>
							<li><a href="jiankong.html">详细参数</a></li>
							<li class="current"><a href="tempshow.html">温度监控</a></li>
							<li ><a href="humityshow.html">湿度监控</a></li>
							<li><a href="nongzuowu.html">农作物详情</a></li>
							<li ><a href="contactus.html">联系我们</a></li>
						</ul>
					</nav>

		</div>

		<!-- Main -->
		<section class="wrapper style1" >

			<div class="container" style="width:1250;height:600px;">
			<span style="text-align: center; width:300px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<span style="text-align: center; font-size: 16pt; font-weight: bold;">选择大棚编号</span>
				<select id="tempselect">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
				</select>
				<br>
			    <br>
				<!-- 图一所占空间 -->
				<div id="staff_month_orderCount" style="width: 1000px;height:500px; margin-bottom: 20px;margin:auto"></div>
			</div>


		</section>

		<!-- Footer -->
		<div id="footer">
			<div class="container">
				<div class="row">
					<section class="3u 6u(narrower) 12u$(mobilep)">
						<h3>相关链接</h3>
						<div class="links">
							<span><a href="http://www.crnews.net/">中国农村网</a></span>&nbsp;&nbsp;
							<span><a href="http://www.agronet.com.cn/">农业网</a></span>&nbsp;&nbsp;
							<span><a href="https://www.farmer.com.cn/">中国农网</a></span>&nbsp;&nbsp;
						</div>
					</section>
				</div>
			</div>

			<!-- Copyright -->
			<div class="copyright">
				<ul class="menu">
					<li>&copy; 其实都队</li>
				</ul>
			</div>

		</div>
	</div>
	<script type="text/javascript">
				var houseId = "0001";
				var t20= 0;
				var t19= 0;
				var t18= 0;
				var t17= 0;
				var t16= 0;
				var t15= 0;
				var t14= 0;
				var t13= 0;
				var t12= 0;
				var t11= 0;
				var t10= 0;
				var t9= 0;
				var t8= 0;
				var t7= 0;
				var t6= 0;
				var t5= 0;
				var t4= 0;
				var t3= 0;
				var t2= 0;
				var t1= 0;
			
				
				 function showTempData(){
					 

						var url = "DataShow";
						var args = {
							"houseId" : houseId,				
							"time" : new Date()
						};
						
						$.post(url, args, function(data) {	 
							var jasondemo = $.parseJSON(data);
							
							 
							t20 = jasondemo[0].temp;
							t19 = jasondemo[1].temp;
							t18 = jasondemo[2].temp;
							t17 = jasondemo[3].temp;
							t16 = jasondemo[4].temp;
							t15 = jasondemo[5].temp;
							t14 = jasondemo[6].temp;
							t13 = jasondemo[7].temp;
							t12 = jasondemo[8].temp;
							t11 = jasondemo[9].temp;
							t10 = jasondemo[10].temp;
							t9 = jasondemo[11].temp;
							t8 = jasondemo[12].temp;
							t7 = jasondemo[13].temp;
							t6 = jasondemo[14].temp;
							t5 = jasondemo[15].temp;
							t4 = jasondemo[16].temp;
							t3 = jasondemo[17].temp;
							t2 = jasondemo[18].temp;
							t1 = jasondemo[19].temp;
							
							
							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document.getElementById('staff_month_orderCount'), 'dark');

							// 指定图表的配置项和数据
							var option = {
									title: {
										text: '温度变化图'
									},
									tooltip: {
										trigger: 'axis',
										axisPointer: {
											type: 'cross',
											label: {
												backgroundColor: '#6a7985'
											}
										}
									},
									legend: {
										data: ['温度实时数据']
									},
									toolbox: {
										feature: {
											saveAsImage: {}
										}
									},
									grid: {
										left: '3%',
										right: '4%',
										bottom: '3%',
										containLabel: true
									},
									xAxis: [{
										type: 'category',
										boundaryGap: false,
										data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']
									}],
									yAxis: [{
										type: 'value'
									}],
									series: [{
											name: 'Temp',
											type: 'line',
											stack: 'Total',
											areaStyle: {},
											emphasis: {
												focus: 'series'
											},
											data: [t1,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13,t14,t15,t16,t17,t18,t19,t20]
										}	
									]
								};
								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
							
						
						});
						 
				    	 
				    	
				    };
				
				    $(function(){
				    	setInterval(function(){
				    	showTempData();
				    	},2000);
				    });
				
				
				 						
					$(function(){
				    	 $("#tempselect").click(function(){
				    		 houseId = $("#tempselect").val();
				    		 
				    	 });
				    });
			</script>
	

</body>

</html>