当前位置：首页 > news >正文

数据可视化大屏设计与实现

news 2025/6/26 23:27:04

本文将带你一步步了解如何使用 ECharts 实现一个数据可视化大屏，并且如何动态加载天气数据展示。通过整合 HTML、CSS、JavaScript 以及后端接口请求，我们可以构建一个响应式的数据可视化页面。

1. 页面结构介绍

在此例中，整个页面分为几个主要部分：大屏展示区域、多个数据图表、动态加载的表格数据，以及地图展示等功能模块。我们将详细介绍每一部分的实现和交互。

1.1 页面整体结构

以下是页面的结构，其中包含多个图表、数据表格和地图组件：

<body><!-- 放大显示的容器 --><div id="overlay1" class="echarts-overlay"><div id="echart-large1" class="echarts-large"></div></div><div id="overlay2" class="echarts-overlay"><div id="echart-large2" class="echarts-large"></div></div><div id="overlay3" class="echarts-overlay"><div id="echart-large3" class="echarts-large"></div></div><div id="overlay4" class="echarts-overlay"><div id="echart-large4" class="echarts-large"></div></div><div id="overlay5" class="echarts-overlay"><div id="echart-large5" class="echarts-large"></div></div><div id="overlay6" class="echarts-overlay"><div id="echart-large6" class="echarts-large"></div></div><div id="overlay7" class="echarts-overlay"><div id="echart-large7" class="echarts-large"></div></div><div id="main" class="main"><div id="title" class="title">大屏可视化展板-ECharts</div><div id="content" class="content"><div id="left-chart" class="left-chart"><div id="chart1" class="chart chart1"></div><div id="chart2" class="chart chart2"></div><div id="chart3" class="chart chart3"></div></div><div id="mid-chart" class="mid-chart"><div class="count"><div id="count1" class="container number"></div><div class="container number count2">328193</div></div><div id="chart7" class="chart7 map"></div></div><div id="right-chart" class="right-chart"><div id="chart4" class="chart chart4"></div><div id="chart5" class="chart chart5"></div><div id="chart6" class="chart chart6"></div></div></div></div><div class="model_content"><div class="model model1"><div class="title-content"><table><thead><tr><th class="th1">城市</th><th class="th2">天气</th></tr></thead></table></div><div class="scroll-content"><table><tbody id="tableBody"><!-- 通过 JavaScript 插入数据 --></tbody></table></div></div><div class="model model1"><div class="title-content"><table><thead><tr><th class="th1">城市</th><th class="th2">温度</th></tr></thead></table></div><div class="scroll-content"><table><tbody id="tableBody2"><!-- 通过 JavaScript 插入数据 --></tbody></table></div></div></div><script>document.addEventListener("DOMContentLoaded", function () {axios.get('http://localhost:5000/api/weather_data').then(response => {console.log("1111", response.data);const tableBody = document.getElementById('tableBody');if (tableBody) {let rowsHTML = '';response.data.forEach((item) => {rowsHTML += `<tr><td>${item.city}</td><td>${item.weather}</td></tr>`;});tableBody.innerHTML = rowsHTML;}}).catch(error => {console.error("Error fetching weather data", error);});});</script><script src="chart1.js"></script>
</body>

1.2 页面布局说明

页面采用了一个主页面和多个区域：

Overlay 区域：用于展示大图，通常是当用户点击某个图表时，将会弹出放大的图表展示区域。
Main 区域：包含了标题和三个区域（左侧图表区域、中间数字和地图展示区域、右侧图表区域）。这些区域通过 ECharts 图表进行数据的动态展示。
Model Content 区域：包含两个表格模块，分别展示了天气信息和温度信息。表格内容通过接口返回的数据动态填充。

2. 数据可视化实现

2.1 图表部分

通过使用 ECharts 图表库，我们可以在页面的不同位置展示各种类型的图表（如折线图、柱状图、饼图等）。

<div id="chart1" class="chart chart1"></div>
<div id="chart2" class="chart chart2"></div>
<div id="chart3" class="chart chart3"></div>

2.2 动态加载天气数据

页面中的天气表格通过 Axios 从后台接口 http://localhost:5000/api/weather_data 获取天气数据，并将数据动态填充到表格中。

document.addEventListener("DOMContentLoaded", function () {axios.get('http://localhost:5000/api/weather_data').then(response => {const tableBody = document.getElementById('tableBody');if (tableBody) {let rowsHTML = '';response.data.forEach((item) => {rowsHTML += `<tr><td>${item.city}</td><td>${item.weather}</td></tr>`;});tableBody.innerHTML = rowsHTML;}}).catch(error => {console.error("Error fetching weather data", error);});
});

3. 样式和布局

通过适当的 CSS 样式来确保页面的响应式布局，确保页面在不同的设备和分辨率下展示良好。

#main {display: flex;justify-content: space-between;margin-top: 20px;
}
.left-chart, .mid-chart, .right-chart {width: 32%;
}
.chart {height: 200px;margin-bottom: 20px;
}

4. 整合 ECharts 和数据接口

我们还需要创建 ECharts 实例并绑定到对应的 DOM 元素中。例如：

var myChart1 = echarts.init(document.getElementById('chart1'));
var option1 = {title: { text: '示例图表1' },xAxis: { data: ['A', 'B', 'C', 'D'] },yAxis: {},series: [{ data: [120, 200, 150, 80], type: 'bar' }]
};
myChart1.setOption(option1);

同样的方法可以应用到其他图表中，根据不同的需求加载对应的图表类型。

5. 完整代码

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>大屏数据可视化</title><script src="echarts.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><!-- 引入世界地图数据 --><script src="world.js"></script><script src="echarts-gl.min.js"></script><script src="axios.min.js"></script><script src="china.js"></script> <!-- 引入 china.js 文件 --><script src="hunan.json"></script> <!-- 引入 china.json 文件 --><link rel="icon" href="favicon.png" type="image/png"><link rel="stylesheet" href="index.css"><style>/* 放大后的容器 */.echarts-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;justify-content: center;align-items: center;z-index: 9999;}/* 放大的 ECharts 图表 */.echarts-large {/* margin: 50% 50%; */width: 100vw;height: 95vh;z-index: 9999;}</style>
</head><body><!-- 放大显示的容器 --><div id="overlay1" class="echarts-overlay"><div id="echart-large1" class="echarts-large"></div></div><div id="overlay2" class="echarts-overlay"><div id="echart-large2" class="echarts-large"></div></div><div id="overlay3" class="echarts-overlay"><div id="echart-large3" class="echarts-large"></div></div><div id="overlay4" class="echarts-overlay"><div id="echart-large4" class="echarts-large"></div></div><div id="overlay5" class="echarts-overlay"><div id="echart-large5" class="echarts-large"></div></div><div id="overlay6" class="echarts-overlay"><div id="echart-large6" class="echarts-large"></div></div><div id="overlay7" class="echarts-overlay"><div id="echart-large7" class="echarts-large"></div></div><div id="main" class="main"><div id="title" class="title">大屏可视化展板-ECharts</div><div id="content" class="content"><div id="left-chart" class="left-chart"><div id="chart1" class="chart chart1"></div><div id="chart2" class="chart chart2"></div><div id="chart3" class="chart chart3"></div></div><div id="mid-chart" class="mid-chart"><div class="count"><div id="count1" class="container number"></div><div class="container number count2">328193</div></div><div id="chart7" class="chart7 map"></div></div><div id="right-chart" class="right-chart"><div id="chart4" class="chart chart4"></div><div id="chart5" class="chart chart5"></div><div id="chart6" class="chart chart6"></div></div></div></div><div class="model_content"><div class="model model1"><div class="title-content"><table><thead><tr><th class="th1">城市</th><th class="th2">天气</th></tr></thead></table></div><div class="scroll-content"><table><tbody id="tableBody"><!-- 通过 JavaScript 插入数据 --></tbody></table></div></div><div class="model model1"><div class="title-content"><table><thead><tr><th class="th1">城市</th><th class="th2">温度</th></tr></thead></table></div><div class="scroll-content"><table><tbody id="tableBody2"><!-- 通过 JavaScript 插入数据 --></tbody></table></div></div></div><script>document.addEventListener("DOMContentLoaded", function () {// 代码在页面完全加载后执行axios.get('http://localhost:5000/api/weather_data').then(response => {console.log("1111", response.data);const tableBody = document.getElementById('tableBody');// 如果表格主体部分存在，开始插入数据if (tableBody) {let rowsHTML = '';for (let i = 0; i < response.data.length; i++) {rowsHTML += `<tr><td>${response.data[i].name}</td><td>天气 ${response.data[i].values.weather}</td></tr>`;}tableBody.innerHTML = rowsHTML;} else {console.error('tableBody元素未找到');}}).catch(error => console.error('Error:', error));});document.addEventListener("DOMContentLoaded", function () {// 代码在页面完全加载后执行axios.get('http://localhost:5000/api/weather_data').then(response => {console.log("1111", response.data);const tableBody = document.getElementById('tableBody2');// 如果表格主体部分存在，开始插入数据if (tableBody) {let rowsHTML = '';for (let i = 0; i < response.data.length; i++) {rowsHTML += `<tr><td>${response.data[i].name}</td><td>${response.data[i].value} ℃</td></tr>`;}tableBody.innerHTML = rowsHTML;} else {console.error('tableBody元素未找到');}}).catch(error => console.error('Error:', error));});</script><script src="chart1.js"></script><script src="chart2.js"></script><script src="chart3.js"></script><script src="chart4.js"></script><script src="chart5.js"></script><script src="chart6.js"></script><script src="chart7.js"></script><script src="count1.js"></script><script>// 监听窗口大小变化，确保 ECharts 图表自适应window.addEventListener('resize', function () {var chart1 = echarts.getInstanceByDom(document.getElementById('chart1'));var chart2 = echarts.getInstanceByDom(document.getElementById('chart2'));var chart3 = echarts.getInstanceByDom(document.getElementById('chart3'));var chart4 = echarts.getInstanceByDom(document.getElementById('chart4'));var chart5 = echarts.getInstanceByDom(document.getElementById('chart5'));var chart6 = echarts.getInstanceByDom(document.getElementById('chart6'));var chart7 = echarts.getInstanceByDom(document.getElementById('chart7'));if (chart1) chart1.resize();if (chart2) chart2.resize();if (chart3) chart3.resize();if (chart4) chart4.resize();if (chart5) chart5.resize();if (chart6) chart6.resize();if (chart7) chart7.resize();});let debounceTimeout;window.addEventListener('resize', function () {// 清除之前的延时调用clearTimeout(debounceTimeout);// 设置新的延时调用，在窗口大小调整停止 300 毫秒后刷新页面debounceTimeout = setTimeout(function () {if (window.innerWidth < 1200) {window.location.reload();}}, 100); // 300 毫秒的延迟});</script>
</body></html>

index.css

.main {width: 100%;height: 100%;display: grid;grid-template-rows: 5% 95%;background-image: url("background.png");background-repeat: no-repeat;background-size: cover;
}.title {width: 100%;text-align: center;line-height: 56.14px;font-size: 30px;font-weight: 700;color: aliceblue;text-shadow: 0px 0px 9px #159AFF;position: relative;/* 为了定位下划线 */color: #00f7ff;/* 文字颜色为科技感的蓝色 */
}/* 下框线效果 */
.title::after {content: '';/* 创建一个空的内容来作为下框线 */position: absolute;/* 定位到标题下方 */left: 0;/* 从左边开始 */bottom: -2px;/* 离文字稍微有点距离 */width: 100%;/* 让下框线宽度与标题一致 */height: 3px;/* 下框线的高度 */background: linear-gradient(90deg, rgba(0, 247, 255, 0.8), rgba(255, 0, 255, 0.8));/* 使用渐变效果 */box-shadow: 0 0 10px rgba(0, 247, 255, 0.6), 0 0 15px rgba(255, 0, 255, 0.6);/* 加入光晕效果 */
}.content {width: 100%;height: 100vh;display: grid;grid-template-columns: 30% 40% 30%;
}.left-chart {width: 100%;height: 100vh;display: grid;grid-template-rows: repeat(3, 1fr);/* 3行平分容器高度 */
}.mid-chart {width: 100%;height: 100vh;display: grid;grid-template-rows: 1fr 5fr;/* 3行平分容器高度 */
}.right-chart {width: 100%;height: 100vh;display: grid;grid-template-rows: repeat(3, 1fr);/* 3行平分容器高度 */
}.chart {width: 100%;height: 100%;background-image: url("kk.png");background-repeat: no-repeat;background-size: 100% 103%;background-position: center;
}.chart7 {width: 100%;height: 80%;
}@font-face {font-family: "DS-Digital";src: url("./count.ttf");
}.number {text-align: center;font-family: DS-Digital;font-size: 80px;color: aliceblue;line-height: 200px;text-shadow: 0px 0px 9px #159AFF;
}.count {display: grid;grid-template-columns: 1fr 1fr;background-image: url("VCG211513642548.png");background-repeat: no-repeat;background-size: 120% 130%;background-position: center;margin-top: 10px;
}/* 窗口尺寸变化时调整布局 */
@media (max-width: 1200px) {.main {}.content {grid-template-columns: 1fr 1fr 1fr;/* 中等屏幕时，调整为两列 */}.title {font-size: 2vw;}
}@media (max-width: 768px) {.content {grid-template-columns: 1fr;/* 小屏幕时，调整为单列 */}.title {font-size: 2vw;}
}/* 使 model_content 定位到页面的中间下方 */
.model_content {position: fixed;/* 使用固定定位 */left: 50%;/* 使其水平居中 */bottom: 20px;/* 距离页面底部 20px */transform: translateX(-50%);/* 完全居中对齐 */z-index: 999;/* 确保浮动层在其他内容之上 */display: flex;/* 使用 flexbox 来排列两个 .model 元素 */gap: 50px;/* 两个 .model 元素之间的间隙 */
}/* 给 model 元素设置大小和背景蒙版 */
.model {width: 300px;/* 设置每个 model 的宽度 */height: 200px;/* 设置每个 model 的高度 */background-color: rgba(173, 216, 230, 0.4);/* 设置半透明黑色背景 */border-radius: 10px;/* 设置圆角 */position: relative;/* 使其可嵌套其他内容 */overflow: hidden;/* 隐藏超出盒子的内容 */
}/* .model1 和 .model2 可以有不同的颜色或样式，按照需要自定义 */
.model1 {background-color: rgba(0, 0, 0, 0.6);/* 半透明深黑色 */
}.model2 {background-color: rgba(0, 0, 0, 0.4);/* 半透明浅黑色 */
}/* 滚动内容容器 */
.scroll-content {display: flex;flex-direction: column;/* 垂直排列数据 */overflow: hidden;/* 隐藏超出容器的内容 */animation: scroll 50s linear infinite;
}/* 控制数据项的间距 */
.scroll-content p {margin: 10px 0;
}/* 表格样式 */
table {width: 100%;border-collapse: collapse;/* 合并边框 *//* 半透明背景 */border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}.title-content {position: relative;z-index: 999;
}/* 表头样式 */
th {background-color: rgb(4, 45, 97);/* 半透明蓝色背景 */color: rgb(167, 165, 165);/* 白色文字 */padding: 10px;font-weight: bold;                                                                                                                                     border-bottom: 1px solid rgba(255, 255, 255, 0.3);text-align: center;
}/* 表格单元格样式 */
td {padding: 8px;text-align: left;border-bottom: 1px solid #ddd;font-size: 14px;text-align: center;color: rgb(223, 218, 218);
}/* 鼠标悬浮时改变表格行背景 */
tr:hover {background-color: rgba(0, 123, 255, 0.1);
}/* 设置滚动动画 */
@keyframes scroll {0% {transform: translateY(0);}100% {transform: translateY(-100%);/* 向上滚动一个完整的容器高度 */}
}

api.py

from flask import Flask, jsonify
from flask_cors import CORS  # 导入CORS
import sqlite3# 创建Flask应用实例
app = Flask(__name__)# 启用CORS
# CORS(app)  # 这将允许所有源的请求
CORS(app, origins='http://127.0.0.1:5500')# 定义路由和视图函数
@app.route('/')
def hello_world():return 'Hello, World!'@app.route('/api/bar_data')
def get_data():"""从SQLite数据库中读取数据，并将其转换为JSON格式返回。:return: 一个JSON格式的响应，包含从数据库中读取的数据。"""conn = sqlite3.connect('database.db')cursor = conn.cursor()# 查询数据cursor.execute('SELECT category, sales FROM bar_data')rows = cursor.fetchall()# 将数据转换为字典列表data = {'categories': [row[0] for row in rows], 'sales': [row[1] for row in rows]}# 关闭连接conn.close()return jsonify(data)@app.route('/api/weather_data')
def get_weather_data():"""从SQLite数据库中读取数据，并将其转换为JSON格式返回。:return: 一个JSON格式的响应，包含从数据库中读取的数据。"""conn = sqlite3.connect('database.db')cursor = conn.cursor()# 查询数据cursor.execute('SELECT date, city,weather, max_tem, min_tem, tem, update_time FROM weather')rows = cursor.fetchall()# 将数据转换为字典列表data = [{'name': row[1], 'value': row[5], 'values': {'weather':row[2],'max_tem':row[3],'min_tem':row[4],}} for row in rows]# 关闭连接conn.close()return jsonify(data)@app.route('/api/line_bar_data')
def get_line_bar_data():"""从SQLite数据库中读取数据，并将其转换为JSON格式返回。:return: 一个JSON格式的响应，包含从数据库中读取的数据。"""conn = sqlite3.connect('database.db')cursor = conn.cursor()# 查询数据cursor.execute('SELECT category, value FROM line_bar_data')rows = cursor.fetchall()# 将数据转换为字典列表data = {'categories': [row[0] for row in rows],'values': [row[1] for row in rows]}print(data)# 关闭连接conn.close()return jsonify(data)# 启动应用
if __name__ == '__main__':app.run(debug=True)

6. 小结

通过结合 ECharts、Axios 和后端数据接口，您可以轻松构建一个功能全面、动态更新的数据可视化大屏。本示例通过展示图表、动态填充表格数据和地图展示等功能，帮助用户实现实时数据的可视化展示。

数据可视化大屏设计与实现

本文将带你一步步了解如何使用 ECharts 实现一个数据可视化大屏，并且如何动态加载天气数据展示。通过整合 HTML、CSS、JavaScript 以及后端接口请求，我们可以构建一个响应式的数据可视化页面。 1. 页面结构介绍在此例中，整个页面分为几个主…...

编程日记 2025/1/19 14:24:44

PDF文件提取开源工具调研总结

概述 PDF是一种日常工作中广泛使用的跨平台文档格式，常常包含丰富的内容：包括文本、图表、表格、公式、图像。在现代信息处理工作流中发挥了重要的作用，尤其是RAG项目中，通过将非结构化数据转化为结构化和可访问的信息&#xff0…...

编程日记 2025/1/19 14:21:40

多监控m3u8视频流，怎么获取每个监控的封面图(纯前端)

文章目录 1.背景2.问题分析3.解决方案3.1解决思路3.2解决过程3.2.1 封装播放组件3.2.2 隐形的视频div3.2.3 截取封面图 3.3 结束 1.背景有这样一个需求： 给你一个监控列表，每页展示多个监控（至少12个，m3u8格式）&…...

编程日记 2025/1/19 14:17:34

【机器学习实战入门项目】使用深度学习创建您自己的表情符号

深度学习项目入门——让你更接近数据科学的梦想表情符号或头像是表示非语言暗示的方式。这些暗示已成为在线聊天、产品评论、品牌情感等的重要组成部分。这也促使数据科学领域越来越多的研究致力于表情驱动的故事讲述。随着计算机视觉和深度学习的进步，现在可以…...

编程日记 2025/1/19 14:13:30

技术洞察：C++在后端开发中的前沿趋势与社会影响

文章目录引言C在后端开发中的前沿趋势1. 高性能计算的需求2. 微服务架构的兴起3. 跨平台开发的便利性跨领域技术融合与创新实践1. C与人工智能的结合2. C与区块链技术的融合 C对社会与人文的影响1. 提升生产力与创新能力2. 促进技术教育与人才培养3. 技术与人文的深度融合结…...

编程日记 2025/1/19 14:08:23

【人工智能 | 大数据】基于人工智能的大数据分析方法

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘，以提取有价值的信息和洞察。它结合了大数据技术、人工智能（AI）、机器学习（ML&a…...

编程日记 2025/1/19 14:00:15

数字经济时代下的创新探索与实践：以“开源AI智能名片2+1链动模式S2B2C商城小程序源码”为核心

摘要：在数字经济蓬勃发展的今天，中国作为全球数字经济的领航者，正以前所未有的速度推进“数字中国”建设。本文旨在探讨“开源AI智能名片21链动模式S2B2C商城小程序源码”在数字经济背景下的应用潜力与实践价值，从多个维度分析其对…...

编程日记 2025/1/19 13:59:13

【English-Book】Go in Action目录页翻译中文

第8页内容前言 xi 序言 xiii 致谢 xiv 关于本书 xvi 关于封面插图 xix 1 介绍 Go 1 1.1 用 Go 解决现代编程挑战 2 开发速度 3 • 并发 3 • Go 的类型系统 5 内存管理 7 1.2 你好，Go 7 介绍 Go 玩具 8 1.3 总结 8 2 Go 快速入门 9 2.1 程序架构 10 2.2 主包 …...

编程日记 2025/1/19 13:55:08

js: 区分后端返回数字是否为null、‘-’ 或正常number类型数字。

问： 这是我的代码<CountTo v-if!isNaN(Number(item.num))> <span v-else>{{item.num}}</span> 我希望不是null的时候走countTo，是null的时候直接<span>{{item.num}}</span>显示回答： 最终结果： …...

编程日记 2025/1/19 13:52:06

网络变压器的分类

网络变压器是局域网(LAN)中各级网络设备中必备的元件。它们的主要功能是传输数据，增强信号，并提供电气隔离，以防雷保护和匹配阻抗。网络变压器也被称为数据泵或网络隔离变压器。它们广泛应用于网络交换机、路由器、网卡、集线器等设备中。网…...

编程日记 2025/1/19 13:47:01

SUCTF-SU_BBRE-好久不见21

哈哈哈哈哈哈，，，，纯汇编有大佬用工具反编译成伪代码吗。。。题解： 由function2处逻辑，解rc4得到第一段flag We1com3ToReWorld，正常输入下执行完function0，程序结束，cong…...

编程日记 2025/1/19 13:44:59

Python 实现 NLP 的完整流程

💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...

编程日记 2025/1/19 13:31:46

穷举vs暴搜vs深搜vs回溯vs剪枝系列一＞N 皇后

题目： 解析： 1.决策树： 代码设计： 根据决策树剪枝设计： 代码： class Solution {private List<List<String>> ret;private char[][] path;private boolean[] checkdig1,checkdig2,checkco…...

编程日记 2025/1/19 13:29:41

JEL分类号

JEL分类系统，是美国经济学会“经济文献杂志”(《经济文献杂志》)所创立的对经济学文献的主题分类系统，并被现代西方经济学界广泛采用。该分类方法主要采用开头的一个英文字母与随后的两位阿拉伯数字一起对经济学各部类进行“辞书式”编码分类。 https:…...

编程日记 2025/1/19 13:22:34

设计和优化用于 AR、HUD 和高级显示系统的表面浮雕光栅

表面浮雕光栅是许多光学系统中的关键组件，在控制增强现实 （AR） 显示器、平视显示器 （HUD） 和其他先进光子器件中的光传播方面发挥着关键作用。作为在这个领域工作的工程师和设计师，您了解针对特定应用优化这…...

编程日记 2025/1/19 13:17:23

【今日分享】人工智能加速发现能源新材料的结构与性能

人工智能与材料国际学术会议(ICAIM)workshop9是由来自宁夏大学材料与新能源学院副院长王海龙教授及马薇副教授、杜鑫老师组成，他们将以“人工智能加速发现新能源新材料的结构与性能”为主题开展研讨工作，欢迎对该主题感兴趣的专家学者携稿加入。 loadin…...

编程日记 2025/1/19 13:16:17

Boost Asio TCP异步服务端和客户端

服务端消息分两次发送，第一次发送head，第二次发送body。接收也是先接收head，然后通过head结构中的body长度字段再接收body。 TcpServer.h #pragma once #include <atomic> #include <vector> #include <unordered_set> #…...

编程日记 2025/1/19 13:12:04

1.7 ChatGPT：引领AI对话革命的致胜之道

ChatGPT：引领AI对话革命的致胜之道随着人工智能（AI）技术的迅猛发展，特别是在自然语言处理（NLP）领域，OpenAI 的 ChatGPT 已经成为了举世瞩目的技术突破。从普通的自动化客服到深入的创作与协作，ChatGPT 通过其卓越的语言理解和生成能力，改变了人们与计算机交互的方式…...

编程日记 2025/1/19 13:10:01

WPS数据分析000001

目录一、表格的新建、保存、协作和分享新建保存协作二、认识WPS表格界面三、认识WPS表格选项卡开始选项卡插入选项卡页面布局选项卡公式选项卡数据选项卡审阅选项卡视图选项卡会员专享选项卡一、表格的新建、保存、协作和分享新建 ctrlN------…...

编程日记 2025/1/19 13:08:59

电脑风扇声音大怎么办? 原因及解决方法

电脑风扇是电脑的重要组件之一，它的作用是为电脑的各个部件提供冷却，防止电脑过热。然而，有时候我们会发现电脑风扇的声音特别大，不仅影响我们的使用体验，也可能是电脑出现了一些问题。那么，电脑风扇声音大…...

编程日记 2025/1/19 13:06:57

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/6/26 8:48:12

python打卡day49

知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/6/26 9:03:33

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/6/24 3:20:04

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日来简单学一下子来一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...

编程新知 2025/6/15 21:10:02

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...

编程新知 2025/6/26 2:04:23

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/6/19 3:49:44

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...

编程新知 2025/6/16 13:45:11

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/6/26 16:09:26