基于 Echarts + Python Flask 動(dòng)態(tài)實(shí)時(shí)大屏監(jiān)管系統(tǒng)
↓推薦關(guān)注↓
大家好，今天給大家分享一款基于 Echarts + Python Flask 動(dòng)態(tài)實(shí)時(shí)大屏監(jiān)管系統(tǒng)，喜歡記得收藏、點(diǎn)贊、關(guān)注。
效果展示
1.動(dòng)態(tài)實(shí)時(shí)更新數(shù)據(jù)效果圖
2.鼠標(biāo)右鍵切換主題?
?
一、確定需求方案?
1. 屏幕分辨率
2. 部署方式?
二、整體架構(gòu)設(shè)計(jì)
前端Echarts開(kāi)源庫(kù)：使用 WebStorm 編輯器；
后端 http服務(wù)器：基于 Python 實(shí)現(xiàn)，使用 Pycharm 或 VSCode 編輯器；
數(shù)據(jù)傳輸格式：JSON；
數(shù)據(jù)源類型：JSON文件。實(shí)際開(kāi)發(fā)需求中，支持定制HTTP API接口方式或其它各種類型數(shù)據(jù)庫(kù)，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
數(shù)據(jù)更新方式：采用http get 輪詢方式?。在實(shí)際應(yīng)用中，也可以視情況選擇j監(jiān)測(cè)后端數(shù)據(jù)實(shí)時(shí)更新，實(shí)時(shí)推送到前端的方式；
三、編碼實(shí)現(xiàn) （基于篇幅及可讀性考慮，此處展示部分關(guān)鍵代碼）
1. 前端html代碼
<div class="grid-container"><div id="lo_0"><h2>32 數(shù)據(jù)可視化-銀行監(jiān)管系統(tǒng)h2>div><div id="lo_1">div><div id="lo_2">div><div id="lo_3">div><div id="lo_4">div><div id="lo_5">div><div id="lo_6">div><div id="lo_7">div><div id="lo_8"><div style="height: 10%;"><buttononclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirmAdd')">新增金額button><buttononclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirm')">累計(jì)金額button><buttononclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'nowConfirm')">現(xiàn)有金額button>div><div id="container_8" style="height: 90%;">div>div><div id="lo_9">9div><div id="lo_10">10div>div>
grid-container 定義
.grid-container {display: grid;/* 6列，定義列寬 */grid-template-columns: 14% 14.5% 20% 20% 14.5% 14%;/* auto: 它用于自動(dòng)設(shè)置行的高度，即取決于行中容器和內(nèi)容的大小。*/grid-template-rows: 10% 25% 30% 30%;grid-gap: 10px;/* background-color: #2196F3; */padding: 0;width: 100%;height: 100%;}
對(duì)橫跨多個(gè)行列的格子定義
#lo_5 {grid-area: 3 / 1 / 4 / 3;}
2.?前端JS -?echarts圖表
function init_echart_line_visualMap(container) {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById(container), gTheme);option = {title: {text: "股票市值實(shí)時(shí)監(jiān)測(cè)",// top: 0,// left: "center",textStyle: {// color: "#17c0ff",fontSize: "12",},},tooltip: {trigger: "item",formatter: "{a}
: {c} (go7utgvlrp%)",position: function (p) {//其中p為當(dāng)前鼠標(biāo)的位置return [p[0] + 10, p[1] - 10];},},grid: {left: "3%",right: "3%",bottom: "3%",top: "25%",containLabel: true,},xAxis: {name: "名稱",type: "category",data: [],axisLabel: {textStyle: {color: "rgba(255,255,255,.8)",//fontSize: 14,},// formatter: "{value}%",},axisLine: {lineStyle: {color: "rgba(255,255,255,.2)",},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",},},},yAxis: {name: "億元",type: "value",data: [],axisLabel: {textStyle: {color: "rgba(255,255,255,.8)",//fontSize: 14,},formatter: "{value}",},axisLine: {lineStyle: {color: "rgba(255,255,255,.2)",},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",},},},visualMap: {top: "top",left: "right",textStyle: {color: "rgba(255,255,255,.8)",//fontSize: 14,},pieces: [{gt: 0,lte: 100,color: "#FF0000",},{gt: 100,lte: 800,color: "#FFA500",},{gt: 800,lte: 900,color: "#2E8B57",},],},series: [{name: "年齡分布",type: "line",// stack: "total",// label: {// show: true,// },// 使用系統(tǒng)函數(shù)markPoint: {label: {textStyle: {color: "rgba(255,255,255,.8)",//fontSize: 14,},},data: [{ type: "max", name: "Max" },{ type: "min", name: "Min" },],},markLine: {data: [{ type: "average", name: "Avg" }],},// 自定義數(shù)據(jù)// markLine: {// // 圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件// silent: true,// label: {// textStyle: {// color: "rgba(255,255,255,.8)",// //fontSize: 14,// },// },// data: [// {// yAxis: 100,// lineStyle: {// color: "#FF0000",// },// },// {// yAxis: 800,// lineStyle: {// color: "#FFA500",// },// },// {// yAxis: 900,// lineStyle: {// color: "#2E8B57",// },// },// ],// },},],};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}function getKeys(dataList) {var keys = [];var len = dataList.length;for (var i = 0; i < len; i++) keys.push(dataList[i].name);return keys;}
3.前端JS - 數(shù)據(jù)定時(shí)更新控制
// 定時(shí)1s執(zhí)行數(shù)據(jù)更新函數(shù)setInterval(function () {async_echart_bar_horizontal(container,path_bar_horizontal + "bar_horizontal.json");}, 1000);
4. 數(shù)據(jù)傳輸格式 - JSON 定義
[{"name": "10:00","value": 300},{"name": "10:01","value": 301},{"name": "10:02","value": 301},{"name": "10:03","value": 300},{"name": "10:04","value": 300},{"name": "10:05","value": 303},{"name": "10:06","value": 303},{"name": "10:07","value": 303}]
5、后端?flask?服務(wù)器
from flask import Flaskapp = Flask(__name__, static_folder="static", template_folder="template")# 主程序在這里if __name__ == "__main__":# 開(kāi)啟線程，觸發(fā)動(dòng)態(tài)數(shù)據(jù)a = threading.Thread(target=asyncJson.loop)a.start()# 開(kāi)啟 flask 服務(wù)app.run(host='0.0.0.0', port=88, debug=True)
四、啟動(dòng)命令
python main.pyhttp://localhost:88/static/index.html
五、運(yùn)行效果
長(zhǎng)按或掃描下方二維碼，后臺(tái)回復(fù)：加群，即可申請(qǐng)入群。一定要備注：來(lái)源+研究方向+學(xué)校/公司，否則不拉入群中，見(jiàn)諒！
（長(zhǎng)按三秒，進(jìn)入后臺(tái)）
推薦閱讀
評(píng)論
圖片
表情