我是 YYDataV数据可视化
专注于 数据可视化大屏， 工厂扫码装箱系统等
我的微信 6550523，多多交流 ~
本案例为32：9超宽分辨率的大屏。
效果展示
1.动态实时更新数据效果图
2.鼠标右键切换主题
代码中预置了12个主题风格，实际开发中可根据实际情况二次增加。
切换个主题，我们可以看到：主题的配色变化了。
一. 确定需求方案
1. 屏幕分辨率
这个案例的大屏分辨率是32: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.设计布局
根据客户的实际需求，首先画出产品的 原型布局。这里我为了后期方便开发，对不同的div进行了 颜色和数字标识。参考index_layout.html
2. 设置模板
根据原始布局，将设计组提供的UI配置到模板中。参考index_template.html
3. 编写图表
做完以上工作，接下来就可以对div加载各式图表！至此，工作已经完成了一半的样子。
四.编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1. 前端html代码
使用bootstrap container-fluid， row， col等实现。
<div id="vue_app" class="container-fluid">
<!-- 标题 -->
<div class="row" style="height: 8%;">
<h3 style="text-align: center; background-image: url(img/header.png); background-size: 100% 100%; ">
【29】数据可视化大屏 - 企业综合信息</h3>
</div>
<!-- 外框 在row这里设置样式-->
<div class="row" style="height: 90%;">
<!-- 左侧1 -->
<div class="col-2" id="container_l1" style="height: 100%; background-image: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;">
<h5 style="text-align: center; margin-top: 15px;">公司概况</h5>
<div class="row" style="height: 18%; margin-bottom: 10px;">
<div class="col-6" style="height: 100%; background-image: url(img/box4.png); background-size: 90%; background-repeat: no-repeat; background-position: center top;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; ">
    营业额达成率</h6>
</div>
<div class="col-6" style="height: 100%; background-image: url(img/box4.png); background-size: 90%; background-repeat: no-repeat; background-position: left top;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; ">
    利润达成率</h6>
</div>
</div>
<div class="row" style="height: 28%; margin-bottom: 10px;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  企业文化</h6>
</div>
<div class="row" style="height: 50%; margin-bottom: 10px;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  市值增长</h6>
</div>
</div>
<!-- 左侧2 -->
<div class="col-2" id="container_l2" style="height:100%; background-image: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;">
<h5 style="text-align: center; margin-top: 15px;">产品数据</h5>
<div class="row" style="height: 25%; margin-bottom: 10px; ">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  产品人力分布</h6>
</div>
<div class=" row" style="height: 30%; margin-bottom: 10px; ">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  日活数据</h6>
</div>
<div class="row" style="height: 42%;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  产品印象</h6>
</div>
</div>
<!-- 中间 -->
<div class=" col-4" id="container_m1" style="height:100%; background-image: url(img/title.png); background-size: 70%; background-repeat: no-repeat; background-position: center top;">
<h5 style="text-align: center; margin-top: 15px;">专注数据可视化，助力企业智能化</h5>
</div>
<!-- 右侧1 -->
<div class="col-2" id="container_r1" style="height:100%; background-image: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;">
<h5 style="text-align: center; margin-top: 15px;">运营概览</h5>
<div class="row" style="height: 27%; margin-bottom: 10px; ">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  客户企业画像</h6>
</div>
<div class="row" style="height: 30%; margin-bottom: 10px; ">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  资产负债率</h6>
</div>
<div class="row" style="height: 40%; ">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  订单完成率</h6>
</div>
</div>
<!-- 右侧2 -->
<div class="col-2" id="container_r2" style="height:100%; background-image: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;">
<h5 style="text-align: center; margin-top: 15px;">团队风采</h5>
<div class="row" style="height: 30%;">
<div class="col-6" style="height: 100%; background-image: url(img/box4.png); background-size: 90% 98%; background-repeat: no-repeat; background-position: center top;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; ">
    性别分布</h6>
</div>
<div class="col-6" style="height: 100%; background-image: url(img/box4.png); background-size: 90% 98%; background-repeat: no-repeat; background-position: left top;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; ">
    年龄分布</h6>
</div>
</div>
<div class="row" style="height: 30%; margin-bottom: 10px;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  开发产品分布</h6>
</div>
<div class="row" style="height: 36%; margin-bottom: 10px;">
<h6 style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; ">
  团队精神</h6>
</div>
</div>
</div></div>
2. JSON 通信数据定义
bar_ROA.json 如下
{
"xAxis": {
"data": [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10"
]
},
"series": [
{
"data": [
84,
76,
99,
51,
65,
98,
72,
100,
67,
87
]
}
]
}
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
<!-- 更多资料参考我的博客主页 -->
https://yydatav.blog.csdn.net/
<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616
我的微信号：6550523 欢迎多多交流
五. 运行效果
六. 源码下载
29【源码】数据可视化大屏：基于Echarts+PythonFlask实现的32-9超宽大屏-企业综合信息.zip-企业管理文档类资源-CSDN下载
更多可视化案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客
Original: https://blog.csdn.net/lildkdkdkjf/article/details/124270995
Author: YYDataV数据可视化
Title: 29【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏 – 企业综合信息
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/747119/
转载文章受原作者版权保护。转载请注明原作者出处！