springboot+echarts+mysql制作数据可视化大屏（滑动大屏）

 作者水平低，如有错误，恳请指正！谢谢！！！！！

项目简单，适合大学生参考

分类专栏还有其它的可视化博客哦！

专栏地址：https://blog.csdn.net/qq_55906442/category_11906804.html?spm=1001.2014.3001.5482

目录

 一、数据源

二、所需工具

三、项目框架搭建

四、代码编写

温度堆叠折线图

平均温度柱状图

温度变化堆叠面积图

南丁格尔玫瑰图

平均温度圆角环形图

五、大屏编写

成果展示：

​

 一、数据源

1）可以使用自己的MySQL数据库；

2）使用我提供的数据。（要数据私信/留言——>留下邮箱即可）

二、所需工具

MySQL、IDEA、jdk1.8、Maven等等，总之编写工具要准备好，环境要搭建好

三、项目框架搭建

参考我博客的项目框架搭建，从3.1看到4.3即可springboot+mybatis+echarts +mysql制作数据可视化大屏_spring + 可视化大屏_一个人的牛牛的博客-CSDN博客

四、代码编写

代码简单，后端代码都写在一起了，没有区分controller等等，前端也是一样，没有单独写js等等。

温度堆叠折线图

后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class TemperatureController {private final JdbcTemplate jdbcTemplate;@Autowiredpublic TemperatureController(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/temperature-data")public Map<String, Object> getTemperatureData() {String query = "SELECT * FROM temperature";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> weekStartDates = new ArrayList<>();List<Double> mondayData = new ArrayList<>();List<Double> tuesdayData = new ArrayList<>();List<Double> wednesdayData = new ArrayList<>();List<Double> thursdayData = new ArrayList<>();List<Double> fridayData = new ArrayList<>();List<Double> saturdayData = new ArrayList<>();List<Double> sundayData = new ArrayList<>();for (Map<String, Object> row : result) {weekStartDates.add(row.get("week_start_date").toString());mondayData.add(Double.parseDouble(row.get("monday").toString()));tuesdayData.add(Double.parseDouble(row.get("tuesday").toString()));wednesdayData.add(Double.parseDouble(row.get("wednesday").toString()));thursdayData.add(Double.parseDouble(row.get("thursday").toString()));fridayData.add(Double.parseDouble(row.get("friday").toString()));saturdayData.add(Double.parseDouble(row.get("saturday").toString()));sundayData.add(Double.parseDouble(row.get("sunday").toString()));}Map<String, Object> data = new HashMap<>();data.put("weekStartDates", weekStartDates);data.put("mondayData", mondayData);data.put("tuesdayData", tuesdayData);data.put("wednesdayData", wednesdayData);data.put("thursdayData", thursdayData);data.put("fridayData", fridayData);data.put("saturdayData", saturdayData);data.put("sundayData", sundayData);return data;}
}

验证接口：运行项目，浏览器访问：http://localhost:8082/temperature-data

前端

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>温度堆叠折线图</title><!-- 引入 ECharts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>/* 设置图表容器的宽度和高度为100% */html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart"></div><script>$(document).ready(function() {// 发送Ajax请求获取温度数据$.ajax({url: "/temperature-data",type: "GET",success: function(data) {// 解析返回的数据var weekStartDates = data.weekStartDates;var mondayData = data.mondayData;var tuesdayData = data.tuesdayData;var wednesdayData = data.wednesdayData;var thursdayData = data.thursdayData;var fridayData = data.fridayData;var saturdayData = data.saturdayData;var sundayData = data.sundayData;// 初始化ECharts实例var myChart = echarts.init(document.getElementById("chart"));// 配置堆叠折线图的数据var option = {title: {text: "温度堆叠折线图"},tooltip: {trigger: "axis"},legend: {data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]},xAxis: {type: "category",data: weekStartDates},yAxis: {type: "value"},series: [{name: "Monday",type: "line",stack: "temperature",data: mondayData},{name: "Tuesday",type: "line",stack: "temperature",data: tuesdayData},{name: "Wednesday",type: "line",stack: "temperature",data: wednesdayData},{name: "Thursday",type: "line",stack: "temperature",data: thursdayData},{name: "Friday",type: "line",stack: "temperature",data: fridayData},{name: "Saturday",type: "line",stack: "temperature",data: saturdayData},{name: "Sunday",type: "line",stack: "temperature",data: sundayData}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);// 在窗口大小变化时重新绘制图表window.addEventListener("resize", function() {myChart.resize();});},error: function(xhr, status, error) {console.log("Error: " + error);}});});
</script>
</body>
</html>

验证页面：运行项目，浏览器访问：http://localhost:8082/temperature.html

平均温度柱状图

后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Temperature2Controller {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Temperature2Controller(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/temperature-data2")public Map<String, Object> getTemperatureData() {String query = "SELECT week_start_date, AVG(monday) as avgMonday, AVG(tuesday) as avgTuesday, AVG(wednesday) as avgWednesday, AVG(thursday) as avgThursday, AVG(friday) as avgFriday, AVG(saturday) as avgSaturday, AVG(sunday) as avgSunday FROM temperature GROUP BY week_start_date";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> weekStartDates = new ArrayList<>();List<Double> avgMondayData = new ArrayList<>();List<Double> avgTuesdayData = new ArrayList<>();List<Double> avgWednesdayData = new ArrayList<>();List<Double> avgThursdayData = new ArrayList<>();List<Double> avgFridayData = new ArrayList<>();List<Double> avgSaturdayData = new ArrayList<>();List<Double> avgSundayData = new ArrayList<>();for (Map<String, Object> row : result) {weekStartDates.add(row.get("week_start_date").toString());avgMondayData.add(Double.parseDouble(row.get("avgMonday").toString()));avgTuesdayData.add(Double.parseDouble(row.get("avgTuesday").toString()));avgWednesdayData.add(Double.parseDouble(row.get("avgWednesday").toString()));avgThursdayData.add(Double.parseDouble(row.get("avgThursday").toString()));avgFridayData.add(Double.parseDouble(row.get("avgFriday").toString()));avgSaturdayData.add(Double.parseDouble(row.get("avgSaturday").toString()));avgSundayData.add(Double.parseDouble(row.get("avgSunday").toString()));}Map<String, Object> data = new HashMap<>();data.put("weekStartDates", weekStartDates);data.put("avgMondayData", avgMondayData);data.put("avgTuesdayData", avgTuesdayData);data.put("avgWednesdayData", avgWednesdayData);data.put("avgThursdayData", avgThursdayData);data.put("avgFridayData", avgFridayData);data.put("avgSaturdayData", avgSaturdayData);data.put("avgSundayData", avgSundayData);return data;}
}

验证接口：运行项目，浏览器访问：​​​​​​​http://localhost:8082/temperature-data2

前端

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>平均温度柱状图</title><!-- 引入 ECharts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart" style="width: 100%; height: 400px;"></div><script>$(document).ready(function() {// 发送 Ajax 请求获取温度数据$.ajax({url: "/temperature-data2",type: "GET",success: function(data) {// 解析返回的数据var weekStartDates = data.weekStartDates;var avgMondayData = data.avgMondayData;var avgTuesdayData = data.avgTuesdayData;var avgWednesdayData = data.avgWednesdayData;var avgThursdayData = data.avgThursdayData;var avgFridayData = data.avgFridayData;var avgSaturdayData = data.avgSaturdayData;var avgSundayData = data.avgSundayData;// 初始化 ECharts 实例var myChart = echarts.init(document.getElementById("chart"));// 配置柱状图的数据var option = {title: {text: "平均温度柱状图"},tooltip: {trigger: "axis"},legend: {data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]},xAxis: {type: "category",data: weekStartDates},yAxis: {type: "value"},series: [{name: "Monday",type: "bar",data: avgMondayData},{name: "Tuesday",type: "bar",data: avgTuesdayData},{name: "Wednesday",type: "bar",data: avgWednesdayData},{name: "Thursday",type: "bar",data: avgThursdayData},{name: "Friday",type: "bar",data: avgFridayData},{name: "Saturday",type: "bar",data: avgSaturdayData},{name: "Sunday",type: "bar",data: avgSundayData}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);},error: function(xhr, status, error) {console.log("Error: " + error);}});// 在窗口大小变化时重新渲染图表$(window).on("resize", function() {if (myChart != null && myChart != undefined) {myChart.resize();}});});
</script>
</body>
</html>

验证页面：运行项目，浏览器访问：​​​​​​​​​​​​​​http://localhost:8082/temperature2.html

温度变化堆叠面积图

后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Temperature3Controller {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Temperature3Controller(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/temperature-data3")public Map<String, Object> getTemperatureData() {String query = "SELECT * FROM temperature";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> weekStartDates = new ArrayList<>();List<Double> mondayData = new ArrayList<>();List<Double> tuesdayData = new ArrayList<>();List<Double> wednesdayData = new ArrayList<>();List<Double> thursdayData = new ArrayList<>();List<Double> fridayData = new ArrayList<>();List<Double> saturdayData = new ArrayList<>();List<Double> sundayData = new ArrayList<>();for (Map<String, Object> row : result) {weekStartDates.add(row.get("week_start_date").toString());mondayData.add(Double.parseDouble(row.get("monday").toString()));tuesdayData.add(Double.parseDouble(row.get("tuesday").toString()));wednesdayData.add(Double.parseDouble(row.get("wednesday").toString()));thursdayData.add(Double.parseDouble(row.get("thursday").toString()));fridayData.add(Double.parseDouble(row.get("friday").toString()));saturdayData.add(Double.parseDouble(row.get("saturday").toString()));sundayData.add(Double.parseDouble(row.get("sunday").toString()));}Map<String, Object> data = new HashMap<>();data.put("weekStartDates", weekStartDates);data.put("mondayData", mondayData);data.put("tuesdayData", tuesdayData);data.put("wednesdayData", wednesdayData);data.put("thursdayData", thursdayData);data.put("fridayData", fridayData);data.put("saturdayData", saturdayData);data.put("sundayData", sundayData);return data;}
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​：http://localhost:8082/temperature-data3

前端

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>平均温度柱状图</title><!-- 引入 ECharts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart" style="width: 100%; height: 400px;"></div><script>$(document).ready(function() {// 发送 Ajax 请求获取温度数据$.ajax({url: "/temperature-data2",type: "GET",success: function(data) {// 解析返回的数据var weekStartDates = data.weekStartDates;var avgMondayData = data.avgMondayData;var avgTuesdayData = data.avgTuesdayData;var avgWednesdayData = data.avgWednesdayData;var avgThursdayData = data.avgThursdayData;var avgFridayData = data.avgFridayData;var avgSaturdayData = data.avgSaturdayData;var avgSundayData = data.avgSundayData;// 初始化 ECharts 实例var myChart = echarts.init(document.getElementById("chart"));// 配置柱状图的数据var option = {title: {text: "平均温度柱状图"},tooltip: {trigger: "axis"},legend: {data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]},xAxis: {type: "category",data: weekStartDates},yAxis: {type: "value"},series: [{name: "Monday",type: "bar",data: avgMondayData},{name: "Tuesday",type: "bar",data: avgTuesdayData},{name: "Wednesday",type: "bar",data: avgWednesdayData},{name: "Thursday",type: "bar",data: avgThursdayData},{name: "Friday",type: "bar",data: avgFridayData},{name: "Saturday",type: "bar",data: avgSaturdayData},{name: "Sunday",type: "bar",data: avgSundayData}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);},error: function(xhr, status, error) {console.log("Error: " + error);}});// 在窗口大小变化时重新渲染图表$(window).on("resize", function() {if (myChart != null && myChart != undefined) {myChart.resize();}});});
</script>
</body>
</html>

 验证页面：运行项目，浏览器访问​​​​​​​：http://localhost:8082/temperature3.html

南丁格尔玫瑰图

后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.math.BigDecimal;
import java.math.RoundingMode;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Temperature4Controller {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Temperature4Controller(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/temperature-data4")public Map<String, Object> getTemperatureData() {String query = "SELECT week_start_date, AVG(monday) AS monday_avg, AVG(tuesday) AS tuesday_avg, AVG(wednesday) AS wednesday_avg, AVG(thursday) AS thursday_avg, AVG(friday) AS friday_avg, AVG(saturday) AS saturday_avg, AVG(sunday) AS sunday_avg FROM temperature GROUP BY week_start_date";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> weekStartDates = new ArrayList<>();List<Double> averageTemperatures = new ArrayList<>();for (Map<String, Object> row : result) {weekStartDates.add(row.get("week_start_date").toString());double averageTemperature = (Double.parseDouble(row.get("monday_avg").toString()) +Double.parseDouble(row.get("tuesday_avg").toString()) +Double.parseDouble(row.get("wednesday_avg").toString()) +Double.parseDouble(row.get("thursday_avg").toString()) +Double.parseDouble(row.get("friday_avg").toString()) +Double.parseDouble(row.get("saturday_avg").toString()) +Double.parseDouble(row.get("sunday_avg").toString())) / 7.0;// 保留2位小数BigDecimal roundedTemperature = BigDecimal.valueOf(averageTemperature).setScale(2, RoundingMode.HALF_UP);averageTemperatures.add(roundedTemperature.doubleValue());}Map<String, Object> data = new HashMap<>();data.put("weekStartDates", weekStartDates);data.put("averageTemperatures", averageTemperatures);return data;}
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​：http://localhost:8082/temperature-data4

前端

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>南丁格尔玫瑰图</title><!-- 引入 ECharts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div><script>$(document).ready(function() {// 发送Ajax请求获取温度数据$.ajax({url: "/temperature-data4",type: "GET",success: function(data) {// 解析返回的数据var weekStartDates = data.weekStartDates;var averageTemperatures = data.averageTemperatures;// 初始化ECharts实例var myChart = echarts.init(document.getElementById("chart"));// 配置南丁格尔玫瑰图的数据var option = {title: {text: "南丁格尔玫瑰图"},tooltip: {trigger: "item"},legend: {data: weekStartDates},series: [{name: "温度",type: "pie",radius: "55%",center: ["50%", "50%"],roseType: "radius",data: (function() {var seriesData = [];for (var i = 0; i < weekStartDates.length; i++) {seriesData.push({name: weekStartDates[i],value: averageTemperatures[i]});}return seriesData;})()}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);},error: function(xhr, status, error) {console.log("Error: " + error);}});});
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​：http://localhost:8082/temperature4.html

平均温度圆角环形图

后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.math.BigDecimal;
import java.math.RoundingMode;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Temperature4Controller {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Temperature4Controller(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/temperature-data4")public Map<String, Object> getTemperatureData() {String query = "SELECT week_start_date, AVG(monday) AS monday_avg, AVG(tuesday) AS tuesday_avg, AVG(wednesday) AS wednesday_avg, AVG(thursday) AS thursday_avg, AVG(friday) AS friday_avg, AVG(saturday) AS saturday_avg, AVG(sunday) AS sunday_avg FROM temperature GROUP BY week_start_date";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> weekStartDates = new ArrayList<>();List<Double> averageTemperatures = new ArrayList<>();for (Map<String, Object> row : result) {weekStartDates.add(row.get("week_start_date").toString());double averageTemperature = (Double.parseDouble(row.get("monday_avg").toString()) +Double.parseDouble(row.get("tuesday_avg").toString()) +Double.parseDouble(row.get("wednesday_avg").toString()) +Double.parseDouble(row.get("thursday_avg").toString()) +Double.parseDouble(row.get("friday_avg").toString()) +Double.parseDouble(row.get("saturday_avg").toString()) +Double.parseDouble(row.get("sunday_avg").toString())) / 7.0;// 保留2位小数BigDecimal roundedTemperature = BigDecimal.valueOf(averageTemperature).setScale(2, RoundingMode.HALF_UP);averageTemperatures.add(roundedTemperature.doubleValue());}Map<String, Object> data = new HashMap<>();data.put("weekStartDates", weekStartDates);data.put("averageTemperatures", averageTemperatures);return data;}
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​：http://localhost:8082/temperature-data4

前端

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>平均温度圆角环形图</title><!-- 引入 ECharts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div><script>$(document).ready(function() {// 发送Ajax请求获取温度数据$.ajax({url: "/temperature-data4",type: "GET",success: function(data) {// 解析返回的数据var weekStartDates = data.weekStartDates;var averageTemperatures = data.averageTemperatures;// 初始化ECharts实例var myChart = echarts.init(document.getElementById("chart"));// 配置圆角环形图的数据var option = {title: {text: "平均温度圆角环形图"},tooltip: {trigger: "item"},series: [{name: "平均温度",type: "pie",radius: ["40%", "70%"],avoidLabelOverlap: false,label: {show: true,position: "inside",formatter: "{b}: {c}"},emphasis: {label: {show: true,fontSize: "16",fontWeight: "bold"}},labelLine: {show: false},data: []}]};// 添加数据for (var i = 0; i < weekStartDates.length; i++) {option.series[0].data.push({name: weekStartDates[i],value: averageTemperatures[i]});}// 使用刚指定的配置项和数据显示图表myChart.setOption(option);},error: function(xhr, status, error) {console.log("Error: " + error);}});});
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​：http://localhost:8082/temperature5.html

五、大屏编写

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>温度数据前端HTML大屏</title><style>body {margin: 0;padding: 0;}#header {background-color: cadetblue;color: #fff;padding: 20px;text-align: center;font-size: 24px;}#container {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 20px;}.big-module {width: 65%;height: 300px;background-color: #f1f1f1;margin-bottom: 20px;}.small-module {width: 43%;height: 400px;background-color: #f1f1f1;margin-bottom: 20px;}.large-module {width: 55%;height: 400px;background-color: #f1f1f1;}.extra-large-module {width: 100%;height: 400px;background-color: #f1f1f1;margin-bottom: 20px;}</style>
</head>
<body style="background-color: cyan">
<div id="header">温度数据前端HTML大屏</div>
<div id="container"><div class="extra-large-module" style="background-color: deepskyblue"><iframe src="temperature2.html" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="large-module" style="background-color: deepskyblue"><iframe src="temperature3.html" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="small-module" style="background-color: deepskyblue"><iframe src="temperature4.html" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="large-module" style="background-color: deepskyblue"><iframe src="temperature.html" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="small-module" style="background-color: deepskyblue"><iframe src="temperature5.html" style="width: 100%; height: 100%; border: none;"></iframe></div>
</div>
</body>
</html>

运行项目，浏览器访问​​​​​​​：http://localhost:8082/bigscreen.html

​

运行项目，浏览器访问：http://localhost:8082/bigscreen.html 

注：http://localhost:8080/加上HTML的文件名都能够查看相应的图！

要码源的私聊/评论留下邮箱号，压缩包包括项目源码、数据sql文件，readme.txt。

声明：作品仅可作学习使用​​​​​​​。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/14040.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于多案例系统学习防洪评价报告编制方法与水流数学模型建模（HECRAS、MIKE、EFDC、Delft3D、FVCOM、SWAT、SWMM等模型应用）

基于多案例系统学习防洪评价报告编制方法与水流数学模型建模（HECRAS、MIKE、EFDC、Delft3D、FVCOM、SWAT、SWMM等模型应用）

目录 ​专题一 《防洪评价报告编制导则解读河道管理范围内建设项目编制导则》&#xff08;SL/T808- 2021&#xff09;解读编制导则解读 专题二 防洪评价相关制度与解析 ★专题三 案例演练解析 专题四 防洪评价地形获取及常用计算实践 专题五 HEC-RAS软件原理及应用案例解析…
阅读更多...
Redis 事务

Redis 事务

是什么 官网&#xff1a;https://redis.io/docs/interact/transactions/ 可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c;按顺序地串行化执行而不会被其它命令插入&#xff0c;不许加塞。 能干嘛 一个队列中&#xff0c;…
阅读更多...
springboot医院挂号小程序

springboot医院挂号小程序

医院挂号系统 springboot医院挂号系统小程序 java医院挂号小程序 技术&#xff1a; 基于springbootvue小程序医院挂号系统的设计与实现 运行环境&#xff1a; JAVA版本&#xff1a;JDK1.8 IDE类型&#xff1a;IDEA、Eclipse都可运行 数据库类型&#xff1a;MySql&#xff08;…
阅读更多...
1.计算机是如何工作的(下)

1.计算机是如何工作的(下)

文章目录 4.编程语言&#xff08;Program Language&#xff09;4.1程序&#xff08;Program&#xff09;4.2早期编程4.3编程语言发展 5.操作系统&#xff08;Operating System&#xff09;5.1操作系统的定位5.2什么是进程/任务&#xff08;Process/Task&#xff09;5.3进程控制…
阅读更多...
Vector - CAPL - 数据库和CAPL_02

Vector - CAPL - 数据库和CAPL_02

DBLookup 动态读取数据库中的信息 //Transmitter 属性以及数据库属性只能通过 DBLookup 动态读取。 //返回数据库中存储的 DLC on message * {int myAttributeValue;myAttributeValue DBLookup(this).MyAttribute;write(this.Transmitter); // compiler errorwrite(DBLookup(…
阅读更多...
押注数字人，百度、科大讯飞“短兵相接”

押注数字人，百度、科大讯飞“短兵相接”

配图来自Canva可画 近两年&#xff0c;小雀斑、柳夜熙、AYAYI等大量网红数字人的相继出现&#xff0c;以及虚拟数字技术在《指环王》和《阿凡达》以及《刺杀小说家》等电影中的广泛应用&#xff0c;还有北京冬奥会期间数字人在手语解说、节目直播等众多场合亮相&#xff0c;使…
阅读更多...
基于Spring Boot的高校实验室信息管理系统设计与实现（Java+spring boot+MySQL+VUE）

基于Spring Boot的高校实验室信息管理系统设计与实现（Java+spring boot+MySQL+VUE）

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的高校实验室信息管理系统设计与实现&#xff08;Javaspring bootMySQLVUE&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 后端&#xff1a;Java springboot…
阅读更多...
GEE：基于MODIS土地覆盖类型“混交林”的净初级生产力（NPP）的区域统计

GEE：基于MODIS土地覆盖类型“混交林”的净初级生产力（NPP）的区域统计

作者：CSDN @ _养乐多_ 本文将介绍如何使用Google Earth Engine（GEE）平台提取特定地区的净初级生产力（NPP）的统计信息，并在地图上可视化。通过加载MODIS数据集，并使用GEE提供的函数和方法，能够高效地计算特定地区的净初级生产力的平均值。 文章目录 一、代码详解二、代…
阅读更多...
备忘录方法--Fibonacci数列 IV

备忘录方法--Fibonacci数列 IV

描述 众所周知&#xff0c;Fibonacci数列是一个著名数列。它的定义是&#xff1a; 本题要求采用第四种方法&#xff1a;备忘录方法&#xff0c;即记忆化搜索。 具体做法是&#xff1a;用数组把曾经求出来的 Fibonacci 数列保存下来&#xff0c;以后要的时候直接取出来。 输入…
阅读更多...
【RPC】—Protobuf编码原理

【RPC】—Protobuf编码原理

Protobuf编码原理 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ Spring专栏&#x1f449;https://blog.csdn.net/weixin_53580595/category_12279588.html SpringMVC专…
阅读更多...
ASL-QPSO|改进量子粒子群自适应算法及其实现(Matlab)

ASL-QPSO|改进量子粒子群自适应算法及其实现(Matlab)

作者在前面的文章中介绍了量子粒子群算法&#xff0c;量子粒子群算法不但继承粒子群算法的优点&#xff0c;还有它自身计算模型更加简洁&#xff0c;控制参数更少等更加突出的优势&#xff0c;但依然存在着一定的局限性。 例如也会存在着早熟收敛的问题&#xff0c;随着迭代次数…
阅读更多...
JAVA每日一练（1）

JAVA每日一练（1）

【程序1】 题目&#xff1a;古典问题&#xff1a;有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问每个月的兔子对数为多少&#xff1f; import java.util.Scanner;/*…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023