ch
技術
后端：flask
可視化：echarts
前端：HTML+JavaScript+css
大屏布局
大屏拆分
案例項目中大屏可按版塊進行拆解，會發(fā)現(xiàn)這里大屏主要由標題、折線圖、柱狀圖、地圖、滾動圖和詞云等組成，整體可切分為8個版塊，如下：
下方為簡單演示：
HTML
我們整體布局前，先通過簡單的案例了解前端布局實現(xiàn)方法。
創(chuàng)建一個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">機器監(jiān)控實時跟蹤</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%;
上面就是劃分位置的參數(shù)，能夠幫我們快速劃分好位置。
這段代碼是用于對一個元素進行定位的 CSS 樣式設置。以下是對每個參數(shù)的詳細介紹：
position: absolute;：將元素的定位類型設置為絕對定位，即相對于其最近的具有定位（非static）的父元素進行定位。
width: 100%;：將元素的寬度設置為父元素的100%。換句話說，元素的寬度將填充其父元素的整個寬度。
height: 50%;：將元素的高度設置為父元素高度的50%。元素將占據(jù)其父元素高度的一半。
top: 50%;：將元素的頂部邊緣相對于其包含塊（通常是最近的已定位祖先元素）的頂部邊緣偏移50%。此設置將使元素的中心垂直居中。
right: 0%;：將元素的右側邊緣相對于其包含塊的右側邊緣偏移0%。換句話說，元素將緊貼其包含塊的右側邊緣。
根據(jù)以上參數(shù)設置，這段代碼將使元素以絕對定位方式出現(xiàn)在父元素內部。元素的寬度將填滿整個父元素的寬度，高度為父元素高度的一半。元素將垂直居中，且右側緊貼父元素。請注意，此代碼片段中未提及其他定位相關屬性（如左側偏移量），因此可能還需要其他樣式設置來完整定義元素的位置和大小。
<!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">機器監(jiān)控實時跟蹤</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開始的，所以需要+1
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
// 使用 'padStart' 函數(shù)來確保每個部分都是兩位數(shù)
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 實現(xiàn)一個實時顯示當前時間的頁面特效,原理：
首先定義了一個 showTime() 函數(shù)，它通過創(chuàng)建一個新的 Date 對象來獲取當前時間，并從中提取年、月、日、小時、分鐘和秒的值。然后使用 padStart() 函數(shù)來確保月、日、小時、分鐘和秒都是兩位數(shù)（如果前綴不足，則在前面添加 ‘0’）。
接下來，將各個提取的時間值整合為一個字符串 formattedDate，其中各個部分之間添加了一些中文字符作為分隔符。
最后，將拼接好的時間字符串賦值給頁面上帶有 “time” ID 的元素，并通過調用 setInterval() 函數(shù)每隔一秒鐘更新一次該元素的內容，從而實現(xiàn)了實時顯示當前時間的效果。
這個例子比較簡單，但是通過這個例子可以了解到 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'));
// 指定圖表的配置項和數(shù)據(jù)
var option_cpu = {
tooltip: {
formatter: '{a} <br/> : {c}%'
},
series: [
{
name: 'CPU',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [
{
value: '{{ cpu_percent }} %',
name: 'CPU使用率'
}
]
}
]
};
// 定義函數(shù)，發(fā)送 Ajax 請求獲取內存使用率數(shù)據(jù)
function getCPUData() {
// 使用原生 JavaScript 發(fā)送 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); // 調用更新圖表的函數(shù)
// }
// };
// xhr.open('GET', '/get_cpu_data', true);
// xhr.send();
// 使用 jQuery 發(fā)送 Ajax 請求
$.ajax({
url: '/get_cpu_data',
dataType: 'json',
type: 'GET',
success: function (data) {
var cpuPercent = data.cpu_percent;
updateChart_cpu(cpuPercent); // 調用更新圖表的函數(shù)
},
error: function (xhr, status, error) {
console.log('獲取數(shù)據(jù)失敗');
}
});
}
// 定義函數(shù)，更新圖表數(shù)據(jù)并重新渲染圖表
function updateChart_cpu(cpuPercent) {
option_cpu.series[0].data[0].value = cpuPercent;
myChart_CPU.setOption(option_cpu);
}
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart_CPU.setOption(option_cpu);
// 使用 setInterval 定時刷新數(shù)據(jù)
setInterval(getCPUData, 5000); // 每5秒刷新一次數(shù)據(jù)
這個只是前端的JS請求后端的接口獲取到數(shù)據(jù)才會顯示（/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 目錄 創(chuàng)建 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'));
// 指定圖表的配置項和數(shù)據(jù)
var option_cpu = {
tooltip: {
formatter: '{a} <br/> : {c}%'
},
series: [
{
name: 'CPU',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [
{
value: '0',
name: 'CPU使用率'
}
]
}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart_CPU.setOption(option_cpu);
controller.js
function getCPUData() {
// 使用原生 JavaScript 發(fā)送 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); // 調用更新圖表的函數(shù)
// }
// };
// xhr.open('GET', '/get_cpu_data', true);
// xhr.send();
// 使用 jQuery 發(fā)送 Ajax 請求
$.ajax({
url: '/get_cpu_data',
dataType: 'json',
type: 'GET',
success: function (data) {
var cpuPercent = data.cpu_percent;
updateChart_cpu(cpuPercent); // 調用更新圖表的函數(shù)
},
error: function (xhr, status, error) {
console.log('獲取數(shù)據(jù)失敗');
}
});
}
// 定義函數(shù)，更新圖表數(shù)據(jù)并重新渲染圖表
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>
正常顯示
后續(xù)如果繼續(xù)深入研究，后端框架可以換成高性能的tornado或者功能更強大的Django，可視化的組件可以換成pyecharts，前端可以使用vue，react框架等。還可以考慮加入sqlite數(shù)據(jù)庫或連接db數(shù)據(jù)庫，打造成一個更完整的項目。文章來源：http://www.zghlxwxcb.cn/news/detail-732046.html
參考文檔：
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.zghlxwxcb.cn/news/detail-732046.html
到了這里，關于Flask配合Echarts寫一個動態(tài)可視化大屏的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
