基于 Echarts + Python Flask 动态实时大屏监管系统

发表于： 2023年8月21日 2023年8月21日
分类：未分类

效果展示

1.动态实时更新数据效果图

2.鼠标右键切换主题

一.确定需求方案

1. 屏幕分辨率

这个案例的分辨率是16:9，最常用的的宽屏比。

根据电脑分辨率屏幕自适应显示，F11全屏查看；

2. 部署方式

B/S方式：支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置好python环境即可。

二. 整体架构设计

前端Echarts开源库：使用 WebStorm 编辑器；
后端 http服务器：基于 Python 实现，使用 Pycharm 或 VSCode 编辑器；
数据传输格式：JSON；
数据源类型：JSON文件。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
数据更新方式：采用http get 轮询方式。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；

三.编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1. 前端html代码

本次页面布局使用H5的grid 布局，代码简单易操作。

<div class="grid-container"> <div id="lo_0"> <h2>32 数据可视化-银行监管系统</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%;"> <button onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirmAdd')">新增金额</button> <button onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirm')">累计金额</button> <button onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'nowConfirm')">现有金额</button> </div> <div id="container_8" style="height: 90%;"></div> </div> <div id="lo_9">9</div> <div id="lo_10">10</div> </div>

grid-container 定义

.grid-container { display: grid; /* 6列，定义列宽 */ grid-template-columns: 14% 14.5% 20% 20% 14.5% 14%; /* auto: 它用于自动设置行的高度，即取决于行中容器和内容的大小。*/ grid-template-rows: 10% 25% 30% 30%; grid-gap: 10px; /* background-color: #2196F3; */ padding: 0; width: 100%; height: 100%; }

对横跨多个行列的格子定义

#lo_5 { grid-area: 3 / 1 / 4 / 3; }

2.前端JS -echarts图表

3.前端JS – 数据定时更新控制

支持在每个echarts图表中独立控制定时更新的间隔。

// 定时1s执行数据更新函数 setInterval(function () { async_echart_bar_horizontal( container, path_bar_horizontal + "bar_horizontal.json" ); }, 1000);

4. 数据传输格式 – 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服务器

from flask import Flaskapp = Flask(__name__, static_folder="static", template_folder="template")# 主程序在这里if __name__ == "__main__": # 开启线程，触发动态数据 a = threading.Thread(target=asyncJson.loop) a.start() # 开启 flask 服务 app.run(host='0.0.0.0', port=88, debug=True)

四. 启动命令

python main.py http://localhost:88/static/index.html

五. 运行效果

admin

2126