Flask配合Echarts写一个动态可视化大屏

ch

技术

后端：flask
可视化：echarts
前端：HTML+JavaScript+css

大屏布局

大屏拆分
案例项目中大屏可按版块进行拆解，会发现这里大屏主要由标题、折线图、柱状图、地图、滚动图和词云等组成，整体可切分为8个版块，如下：
下方为简单演示：
在这里插入图片描述
在这里插入图片描述

HTML

我们整体布局前，先通过简单的案例了解前端布局实现方法。

创建一个html文件，这里先调整标题的布局位置，代码如下：

<!DOCTYPE html>
<html>
<head><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><meta charset="utf-8"/><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><!-- 引入 jQuery 库 --><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script><script src="static/js/echarts.min.js"></script>
</head><body>
<div id="title">机器监控实时跟踪</div>
<div id="time"></div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main"></div><div id="cpu"></div><div id="disk"></div>
<div id="network"></div>
</body>
<html>

展示
在这里插入图片描述

CSS

在上面添加一些css的样式，划分相关的位置

        position: absolute;width: 100%;height: 50%;top: 50%;right: 0%;

上面就是划分位置的参数，能够帮我们快速划分好位置。
这段代码是用于对一个元素进行定位的 CSS 样式设置。以下是对每个参数的详细介绍：

position: absolute;：将元素的定位类型设置为绝对定位，即相对于其最近的具有定位（非static）的父元素进行定位。
width: 100%;：将元素的宽度设置为父元素的100%。换句话说，元素的宽度将填充其父元素的整个宽度。
height: 50%;：将元素的高度设置为父元素高度的50%。元素将占据其父元素高度的一半。
top: 50%;：将元素的顶部边缘相对于其包含块（通常是最近的已定位祖先元素）的顶部边缘偏移50%。此设置将使元素的中心垂直居中。
right: 0%;：将元素的右侧边缘相对于其包含块的右侧边缘偏移0%。换句话说，元素将紧贴其包含块的右侧边缘。

根据以上参数设置，这段代码将使元素以绝对定位方式出现在父元素内部。元素的宽度将填满整个父元素的宽度，高度为父元素高度的一半。元素将垂直居中，且右侧紧贴父元素。请注意，此代码片段中未提及其他定位相关属性（如左侧偏移量），因此可能还需要其他样式设置来完整定义元素的位置和大小。

<!DOCTYPE html>
<html>
<head><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><meta charset="utf-8"/><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><!-- 引入 jQuery 库 --><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script><script src="static/js/echarts.min.js"></script>
</head>
<style>body {margin: 0;background: #333;}#title {position: absolute;width: 40%;height: 10%;top: 0%;left: 30%;background: #666666;color: white;font-size: 30px;display: flex;align-items: center;justify-content: center;font-weight: bold; /* 加粗字体 */border-radius: 10px; /* 增加圆润感 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 增加一些阴影，增加科技感 */}#main {position: absolute;width: 40%;height: 40%;top: 10%;left: 30%;background: #46a9be;color: white;font-size: 30px;display: flex;align-items: center;justify-content: center;font-weight: bold; /* 加粗字体 */border-radius: 10px; /* 增加圆润感 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 增加一些阴影，增加科技感 */}#cpu {position: absolute;width: 30%;height: 40%;top: 10%;left: 0%;background: #48dada;color: white;font-size: 30px;display: flex;align-items: center;justify-content: center;font-weight: bold; /* 加粗字体 */border-radius: 10px; /* 增加圆润感 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 增加一些阴影，增加科技感 */}#time {position: absolute;/* width: 30%; */height: 10%;top: 5%;right: 2%;color: #FFFFFF;font-size: 20px;/* background: green; */}#disk {position: absolute;width: 30%;height: 40%;top: 10%;right: 0%;background: #48dada;color: white;font-size: 30px;display: flex;align-items: center;justify-content: center;font-weight: bold; /* 加粗字体 */border-radius: 10px; /* 增加圆润感 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 增加一些阴影，增加科技感 */}#network {position: absolute;width: 100%;height: 50%;top: 50%;right: 0%;background: #dea594;color: white;font-size: 30px;display: flex;align-items: center;justify-content: center;font-weight: bold; /* 加粗字体 */border-radius: 10px; /* 增加圆润感 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 增加一些阴影，增加科技感 */}
</style><body>
<div id="title">机器监控实时跟踪</div>
<div id="time"></div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main"></div><div id="cpu"></div><div id="disk"></div>
<div id="network"></div>
</body>
<html>

在这里插入图片描述

JS

时间显示

function showTime() {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1; // getMonth() 返回的月份是从0开始的，所以需要+1var day = date.getDate();var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();// 使用 'padStart' 函数来确保每个部分都是两位数month = month.toString().padStart(2, '0');day = day.toString().padStart(2, '0');hour = hour.toString().padStart(2, '0');minute = minute.toString().padStart(2, '0');second = second.toString().padStart(2, '0');var formattedDate = year + '年' + month + '月' + day + '日，' + hour + '时' + minute + '分' + second + '秒';document.getElementById("time").innerHTML = formattedDate;}setInterval(showTime, 1000);

这段代码是用 JavaScript 实现一个实时显示当前时间的页面特效,原理：
首先定义了一个 showTime() 函数，它通过创建一个新的 Date 对象来获取当前时间，并从中提取年、月、日、小时、分钟和秒的值。然后使用 padStart() 函数来确保月、日、小时、分钟和秒都是两位数（如果前缀不足，则在前面添加 ‘0’）。
接下来，将各个提取的时间值整合为一个字符串 formattedDate，其中各个部分之间添加了一些中文字符作为分隔符。
最后，将拼接好的时间字符串赋值给页面上带有 “time” ID 的元素，并通过调用 setInterval() 函数每隔一秒钟更新一次该元素的内容，从而实现了实时显示当前时间的效果。

这个例子比较简单，但是通过这个例子可以了解到 JavaScript 中获取和处理时间的基本方法，以及如何使用定时器来定期更新页面内容。

echarts

https://echarts.apache.org/examples/zh/index.html#chart-type-line

例子：https://echarts.apache.org/examples/zh/editor.html?c=gauge-simple

我们要使用 这个JS来进行大屏展示
在这里插入图片描述
CPU

var myChart_CPU = echarts.init(document.getElementById('cpu'));// 指定图表的配置项和数据var option_cpu = {tooltip: {formatter: '{a} <br/>{b} : {c}%'},series: [{name: 'CPU',type: 'gauge',progress: {show: true},detail: {valueAnimation: true,formatter: '{value}'},data: [{value: '{{ cpu_percent }} %',name: 'CPU使用率'}]}]};// 定义函数，发送 Ajax 请求获取内存使用率数据function getCPUData() {// 使用原生 JavaScript 发送 Ajax 请求// var xhr = new XMLHttpRequest();// xhr.onreadystatechange = function () {//     if (xhr.readyState === 4 && xhr.status === 200) {//         var cpuPercent = JSON.parse(xhr.responseText).cpu_percent;//         updateChart_cpu(cpuPercent); // 调用更新图表的函数//     }// };// xhr.open('GET', '/get_cpu_data', true);// xhr.send();// 使用 jQuery 发送 Ajax 请求$.ajax({url: '/get_cpu_data',dataType: 'json',type: 'GET',success: function (data) {var cpuPercent = data.cpu_percent;updateChart_cpu(cpuPercent); // 调用更新图表的函数},error: function (xhr, status, error) {console.log('获取数据失败');}});}// 定义函数，更新图表数据并重新渲染图表function updateChart_cpu(cpuPercent) {option_cpu.series[0].data[0].value = cpuPercent;myChart_CPU.setOption(option_cpu);}// 使用刚指定的配置项和数据显示图表。myChart_CPU.setOption(option_cpu);// 使用 setInterval 定时刷新数据setInterval(getCPUData, 5000); // 每5秒刷新一次数据

在这里插入图片描述
这个只是前端的JS请求后端的接口获取到数据才会显示（/get_cpu_data）

@app.route('/get_cpu_data')
def get_cpu_data():# 获取机器的 CPU 使用率cpu_percent = psutil.cpu_percent()print(cpu_percent)return jsonify(cpu_percent=cpu_percent)

进击版（JS和CSS剥离）

CSS

在static 目录 创建 CSS文件目录
cpu.css

#cpu {position: absolute;width: 30%;height: 40%;top: 10%;left: 0%;background: #48dada;color: white;font-size: 30px;display: flex;align-items: center;justify-content: center;font-weight: bold; /* 加粗字体 */border-radius: 10px; /* 增加圆润感 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 增加一些阴影，增加科技感 */
}

在这里插入图片描述

在html页面引入相关的css

		<link href="../static/css/main.css" rel="stylesheet" />

JS

cpu.js

var myChart_CPU = echarts.init(document.getElementById('cpu'));
// 指定图表的配置项和数据
var option_cpu = {tooltip: {formatter: '{a} <br/>{b} : {c}%'},series: [{name: 'CPU',type: 'gauge',progress: {show: true},detail: {valueAnimation: true,formatter: '{value}'},data: [{value: '0',name: 'CPU使用率'}]}]
};// 使用刚指定的配置项和数据显示图表。
myChart_CPU.setOption(option_cpu);

controller.js

function getCPUData() {// 使用原生 JavaScript 发送 Ajax 请求// var xhr = new XMLHttpRequest();// xhr.onreadystatechange = function () {//     if (xhr.readyState === 4 && xhr.status === 200) {//         var cpuPercent = JSON.parse(xhr.responseText).cpu_percent;//         updateChart_cpu(cpuPercent); // 调用更新图表的函数//     }// };// xhr.open('GET', '/get_cpu_data', true);// xhr.send();// 使用 jQuery 发送 Ajax 请求$.ajax({url: '/get_cpu_data',dataType: 'json',type: 'GET',success: function (data) {var cpuPercent = data.cpu_percent;updateChart_cpu(cpuPercent); // 调用更新图表的函数},error: function (xhr, status, error) {console.log('获取数据失败');}});
}// 定义函数，更新图表数据并重新渲染图表
function updateChart_cpu(cpuPercent) {option_cpu.series[0].data[0].value = cpuPercent;myChart_CPU.setOption(option_cpu);
}getCPUData();
setInterval(getCPUData, 5000);

在这里插入图片描述

在html页面进行引入，切记，controller.js 最好一个引入

<script src="../static/js/cpu.js"></script>
<script src="../static/js/controller.js"></script>

在这里插入图片描述
正常显示

后续如果继续深入研究，后端框架可以换成高性能的tornado或者功能更强大的Django，可视化的组件可以换成pyecharts，前端可以使用vue，react框架等。还可以考虑加入sqlite数据库或连接db数据库，打造成一个更完整的项目。

参考文档：
https://www.cnblogs.com/hugboy/p/15427793.html
https://zhuanlan.zhihu.com/p/584796840
https://github.com/xiaokai1996/big_screen/blob/master/big_screen%E9%A1%B9%E7%9B%AE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md
https://blog.csdn.net/dwhyxjfm/article/details/127946379

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

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

相关文章

Unity 制作登录功能02-创建和链接数据库（SQlite）

Unity 制作登录功能02-创建和链接数据库（SQlite）

国际惯例&#xff1a;先看效果 1.SQlite是一种嵌入型数据库 在Unity开发游戏时使用SQLite有多种原因&#xff0c;以下是其中一些主要原因&#xff1a; 嵌入式数据库&#xff1a;SQLite是一个嵌入式数据库引擎&#xff0c;这意味着它不需要单独的服务器进程。这使得使用SQLite非…
阅读更多...
VUE2项目：尚品汇VUE-CLI脚手架初始化项目以及路由组件分析（一）

VUE2项目：尚品汇VUE-CLI脚手架初始化项目以及路由组件分析（一）

标题 环境VUE2目录publicassetscomponentsmain.jsbabel.config.jspackage.jsonvue.config.js 项目路由分析Header与Footer非路由组件完成Header示例 路由组件的搭建声明式导航编程式导航 Footer组件的显示与隐藏路由传递参数重写push和replace三级联动组件拆分附件 环境 前提要…
阅读更多...
子序列问题集合

子序列问题集合

子序列问题 删除一次得到的最大和最大子数组和最长公共子序列&#xff1a;最长上升子序列&#xff08;要输出序列&#xff0c;和最大长度&#xff09;1.dp2.贪心二分 导弹拦截 &#xff08;最长上升/下降子序列长度&#xff09; 删除一次得到的最大和 class Solution { public:…
阅读更多...
Elasticsearch基础篇(二)：Elasticsearch在windows和liunx上的安装部署

Elasticsearch基础篇(二)：Elasticsearch在windows和liunx上的安装部署

Elasticsearch简介 前言1. Windows环境部署Elasticsearch1.1 下载并解压Elasticsearch压缩包1.2 命令行启动elasticsearch1.3 验证是否成功启动elasticsearch1.4 关闭Elasticsearch1.5 在Windows上安装Elasticsearch作为服务 2. Liunx环境部署Elasticsearch安装 Elasticsearch …
阅读更多...
Android Studio 的android.jar文件在哪儿

Android Studio 的android.jar文件在哪儿

一般在&#xff1a;C:\Users\admin\AppData\Local\Android\Sdk\platforms\android-33下&#xff08;不一定是33&#xff0c;这个得看你Android Studio->app->builde.gradle的targetSdk是多少&#xff09; 怎么找&#xff1a; 1.打开Android Studio 粘贴地址后&#xff0…
阅读更多...
UE学习记录07----C++中使用事件委托

UE学习记录07----C++中使用事件委托

1.c定义多播委托&#xff0c;示例代码&#xff1a; #include "Delegates/Delegate.h"DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FMyDelegate, UObject*, SelectAgent);/****/ UCLASS(Blueprintable, DisplayName "VM_PlaceEntity") class PR_PLACEE…
阅读更多...
在nodejs中如何防止ssrf攻击

在nodejs中如何防止ssrf攻击

在nodejs中如何防止ssrf攻击 什么是ssrf攻击 ssrf&#xff08;server-side request forgery&#xff09;是服务器端请求伪造&#xff0c;指攻击者能够从易受攻击的Web应用程序发送精心设计的请求的对其他网站进行攻击。(利用一个可发起网络请求的服务当作跳板来攻击其他服务)…
阅读更多...
word 多级目录的问题

word 多级目录的问题

一、多级标题自动编号 --> 制表符 -> 空格 网址&#xff1a; 【Word技巧】2 标题自动编号——将多级列表链接到样式 - YouTube 二、多级列表 --> 正规形式编号 网址&#xff1a;Word 教学 - 定框架&#xff1a;文档格式与多级标题&#xff01; - YouTube 三、目…
阅读更多...
【项目】基于C++11实现的数据库连接池

【项目】基于C++11实现的数据库连接池

文章目录 前置知识关键技术点项目背景连接池功能点介绍MySQL Server参数介绍功能设计连接池功能点介绍开发平台选型 关于MySQL数据库编程MySQL接口介绍 测试表设计Connection设计数据库配置文件mysql.conf日志文件log.hppConnectionPool设计压力测试源码链接&#xff1a; 前置知…
阅读更多...
南京大学【软件分析】13 Static Analysis for Security

南京大学【软件分析】13 Static Analysis for Security

文章目录 1. Information Flow Security2. Confidentiality and Integrity3. Explicit Flows and Covert/Hidden Channels4. Taint Analysis污点分析案例 1. Information Flow Security 引起安全问题最主要的两大原因是&#xff1a;injection errors&#xff08;2013-2019排名…
阅读更多...
【深度学习实验】卷积神经网络（六）：卷积神经网络模型（VGG）训练、评价

【深度学习实验】卷积神经网络（六）：卷积神经网络模型（VGG）训练、评价

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 构建数据集&#xff08;CIFAR10Dataset&#xff09; a. read_csv_labels&#xff08;&#xff09; b. CIFAR10Dataset 2. 构建模型&#xff08;FeedForward&…
阅读更多...
【网络协议】TCP

【网络协议】TCP

TCP协议全称为传输控制协议(Transmission Control Protocol).要理解TCP就要从他的特性开始说&#xff0c;这些特性各自之间或多或少各有联结&#xff0c;需要以宏观视角来看待。 目录&#xff1a; 1.TCP报文格式 因为报文解释过于繁琐&#xff0c;具体内容请看这篇文章TCP报文…
阅读更多...
问题 - 谷歌浏览器 network 看不到接口请求解决方案

问题 - 谷歌浏览器 network 看不到接口请求解决方案

谷歌浏览器 -> 设置 -> 重置设置 -> 将设置还原为其默认值 查看接口情况&#xff0c;选择 All 或 Fetch/XHR&#xff0c;勾选 Has blocked cookies 即可 如果万一还不行&#xff0c;卸载浏览器重装。 参考&#xff1a;https://www.cnblogs.com/tully/p/16479528.html
阅读更多...
微信小程序开发基础（二）基本组件

微信小程序开发基础（二）基本组件

本帖开始介绍小程序中的一些基本组件~ 微信小程序是一种轻量、快速、跨平台的应用程序&#xff0c;是微信公众号的重要组成部分。随着微信小程序的普及&#xff0c;越来越多的开发者和企业开始使用微信小程序来搭建自己的应用&#xff0c;但是对于初次接触微信小程序的开发者…
阅读更多...
CSS 基础 3

CSS 基础 3

目录 &#x1f680; 导读 -- target 盒子模型 看透网页布局的本质 盒子模型组成 边框(border) border-style ​编辑border-color border-width 边框写法 简写 分开写 表格细线边框 边框会影响盒子实际大小 内边距 内容 内边距-padding padding属性简写 pad…
阅读更多...
《PPT 自我介绍》:一本让你的职场表现更加出色的秘籍？

《PPT 自我介绍》:一本让你的职场表现更加出色的秘籍？

这里提供一个2000字左右的PPT自我介绍模板制作指南&#xff1a; 自我介绍是面试或工作中常见的情况&#xff0c;利用PPT可以给人留下更深刻的印象。但如何快速且专业地制作一个自我介绍PPT呢?这里给大家介绍几点技巧&#xff1a; 1. 选择一个简洁大方的PPT模板 首先要选择一…
阅读更多...
STM32F4X UCOSIII任务信号量

STM32F4X UCOSIII任务信号量

STM32F4X UCOSIII任务信号量 任务信号量与内核信号量对比内核信号量任务信号量 UCOSIII任务信号量API任务信号量发送函数任务信号量接收函数 UCOSIII任务信号量例程 之前的章节中讲解过信号量这个机制&#xff0c;UCOSIII除了有内核信号量之外&#xff0c;还有任务信号量。在UC…
阅读更多...
前端项目练习（练习-002-NodeJS项目初始化）

前端项目练习（练习-002-NodeJS项目初始化）

首先&#xff0c;创建一个web-002项目&#xff0c;内容和web-001一样。 下一步&#xff0c;规范一下项目结构&#xff0c;将html&#xff0c;js&#xff0c;css三个文件放到 src/view目录下面&#xff1a; 由于html引入css和js时&#xff0c;使用的是相对路径&#xff0c;所以…
阅读更多...
详解C语言—文件操作

详解C语言—文件操作

目录 1. 为什么使用文件 2. 什么是文件 3. 文件的使用 文件指针 文件的打开和关闭 三个标准的输入/输出流&#xff1a; 4. 文件的顺序读写 对字符操作&#xff1a; fputc&#xff1a; fgetc&#xff1a; 练习复制整个文件&#xff1a; 对字符串操作&#xff1a;…
阅读更多...
WebGL雾化

WebGL雾化

目录 前言 如何实现雾化 线性雾化公式 雾化因子关系图 根据雾化因子计算片元颜色公式 示例程序&#xff08;Fog.js&#xff09; 代码详解​编辑 详解如何计算雾化因子&#xff08;clamp()&#xff09; 详解如何计算最终片元颜色&#xff08;根据雾化因子计算片元颜色…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023