效果展示
1.动态实时更新数据效果图
2.鼠标右键切换主题
3. 数据标线&视觉映射效果
4. 大数据区域缩放效果
一. 确定需求方案
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代码
使用bootstrap container-fluid, row, col等实现。
<div id="vue_app" class="container-fluid">
<!-- 外框 在row这里设置样式-->
<div class="row" style="height: 100%; ">
<!-- 左侧 -->
<div class=" col-3" style="height: 100%;">
<!-- 左侧第1行 -->
<div class="row" id="container_l1"
style="height: 30%; background-color:rgb(21,62,119); margin-bottom: 10px;">
<div class="col-6" id="container_l1_1" style="height: 100%;"></div>
<div class="col-6" id="container_l1_2" style="height: 100%;"></div>
</div>
<!-- 左侧第2行 -->
<div class="row" id="container_l2"
style="height: 30%; background-color:rgb(21,62,119); margin-bottom: 10px;">
</div>
<!-- 左侧第3行 -->
<div class="row" id="container_l3" style="height: 38%; background-color:rgb(21,62,119); ">
</div>
</div>
<!-- 中间 -->
<div class="col-6" style="height:100%;">
<div style="background-color:rgb(21,62,119);">
<!-- 中间第一行 -->
<div class="row-fluid" id="container_m1" style="height: 48%; margin-bottom: 10px;">
</div>
<!-- 中间第二行 -->
<div class="row" id="container_m2"
style="height: 20%; margin-bottom: 10px; color:rgba(255, 255, 255, 0.7); text-align:center">
<div class="col-3" id="container_m2_1"></div>
<div class="col-3" id="container_m2_2"></div>
<div class="col-3" id="container_m2_3"></div>
<div class="col-3" id="container_m2_4"></div>
</div>
<!-- 中间第三行 -->
<div class="row" id="container_m3" style="height: 30%; padding: 10px">
<div class="col-4" id="container_m3_1" style="height: 100%;"></div>
<div class="col-4" id="container_m3_2" style="height: 100%;"></div>
<div class="col-4" id="container_m3_3" style="height: 100%;"></div>
</div>
</div>
</div>
<!-- 右侧 -->
<div class="col-3" style="height:100%;">
<!-- 右侧第一行 -->
<div class="row" id="container_r1"
style="height: 20%; background-color:rgb(21,62,119); margin-bottom: 10px; ">
<dv-scroll-board :config="config" />
</div>
<!-- 右侧第二行 -->
<div class="row" id="container_r2"
style="height: 30%; background-color:rgb(21,62,119); margin-bottom: 10px; ">
</div>
<!-- 右侧第三行 -->
<div class="row" id="container_r3"
style="height: 48%; padding: 10px; background-color:rgb(21,62,119); ">
</div>
</div>
</div>
</div>
2. JSON 通信数据定义
bar_age.json 如下
[
{
"name": "<18",
"value": 2962
},
{
"name": "18-23",
"value": 3119
},
{
"name": "24-30",
"value": 4562
},
{
"name": "31-40",
"value": 5024
},
{
"name": "41-50",
"value": 4791
},
{
"name": ">50",
"value": 4073
}
]
3. 前端JS - 数据定时更新控制
支持在每个echarts图表中独立控制定时更新的间隔。
// 定时1s执行数据更新函数
setInterval(function () {
async_echart_bar_horizontal(
container,
path_bar_horizontal + "bar_horizontal.json"
);
}, 1000);
4.后端 flask 服务器
from flask import Flask
app = 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)
四. 启动命令
<!-- 启动server命令 -->
python main.py
<!-- 浏览器中输入网址查看大屏(端口为 main.py 中的 port 参数定义) -->
http://localhost:88/static/index.html
<!-- 更多资料参考我的博客主页 -->
<!-- 更多案例参考 -->
五. 运行效果
六. 源码下载
28【源码】数据可视化:基于Echarts+PythonFlask动态实时大屏范例-数据分析看板.zip-企业管理文档类资源
更多可视化案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客