我是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;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; "> 营业额达成率</h6><div id="container_l1_1" style="height: 80%;"></div></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;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; "> 利润达成率</h6><div id="container_l1_2" style="height: 80%;"></div></div></div><div class="row" style="height: 28%; margin-bottom: 10px;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 企业文化</h6><div id="container_l1_3" style="height: 70%;"></div></div><div class="row" style="height: 50%; margin-bottom: 10px;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 市值增长</h6><div id="container_l1_4" style="height: 80%;"></div></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; "><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 产品人力分布</h6><div id="container_l2_1" style="height: 70%;"></div></div><div class=" row" style="height: 30%; margin-bottom: 10px; "><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 日活数据</h6><div id="container_l2_2" style="height: 80%;"></div></div><div class="row" style="height: 42%;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 产品印象</h6><div id="container_l2_3" style="height: 80%;"></div></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 class="row" id="container_m1_1"style="height: 92%; background-image: url(img/bottom.png); background-size: 90%; background-repeat: no-repeat;background-position: center bottom;"></div></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; "><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 客户企业画像</h6><div id="container_r1_1" style="height: 70%;"></div></div><div class="row" style="height: 30%; margin-bottom: 10px; "><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 资产负债率</h6><div id="container_r1_2" style="height: 80%;"></div></div><div class="row" style="height: 40%; "><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 订单完成率</h6><div id="container_r1_3" style="height: 80%;"></div></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></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;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; "> 性别分布</h6><div id="container_r2_1" style="height: 70%;"></div></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;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 90% auto; text-align: left; vertical-align: top; "> 年龄分布</h6><div id="container_r2_2" style="height: 70%;"></div></div></div><div class="row" style="height: 30%; margin-bottom: 10px;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 开发产品分布</h6><div id="container_r2_3" style="height: 80%;"></div></div><div class="row" style="height: 36%; margin-bottom: 10px;"><h6style="background-image: url(img/title1.png); background-repeat: no-repeat; background-size: 50% auto; text-align: left; vertical-align: top; "> 团队精神</h6><div id="container_r2_4" style="height: 60%;"></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 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)
四. 启动命令
<!-- 启动server命令 -->python main.py <!-- 浏览器中输入网址查看大屏（端口为 main.py 中的 port 参数定义） -->http://localhost:88/static/index.html<!-- 更多资料参考我的博客主页 -->https://yydatav./<!-- 更多案例参考 -->/lildkdkdkjf/article/details/120705616我的微信号：6550523 欢迎多多交流
五. 运行效果
六. 源码下载
29【源码】数据可视化大屏：基于Echarts+PythonFlask实现的32-9超宽大屏-企业综合信息.zip-企业管理文档类资源-CSDN下载
更多可视化案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客
