我是YYDataV，专注于数据可视化大屏，工厂扫码打包系统等。

这款机箱是32: 9超宽分辨率的大屏。

效果显示

1.数据渲染的动态实时更新

2.用鼠标右键切换主题

代码中预置了12种主题样式，在实际开发中可以根据实际情况添加两次。

切换主题，可以看到主题的配色发生了变化。

一、确定需求计划

1.屏幕分辨率

这种情况下的大屏幕分辨率为32:9，这是一个梦幻般的宽屏比例。

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

2.部署模式

B/S模式:支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome、微软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代码

使用引导容器-流体、行、列等。

<div id="vue_app" class="container-fluid"> <!-- 标题 --> <div class="row" style="height: 8%;"> <h3 style="text-align: center; background-i***ge: 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-i***ge: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;"> <h5 style="text-align: center; ***rgin-top: 15px;">公司概况</h5> <div class="row" style="height: 18%; ***rgin-bottom: 10px;"> <div class="col-6" style="height: 100%; background-i***ge: url(img/box4.png); background-size: 90%; background-repeat: no-repeat; background-position: center top;"> <h6 style="background-i***ge: 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-i***ge: url(img/box4.png); background-size: 90%; background-repeat: no-repeat; background-position: left top;"> <h6 style="background-i***ge: 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%; ***rgin-bottom: 10px;"> <h6 style="background-i***ge: 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%; ***rgin-bottom: 10px;"> <h6 style="background-i***ge: 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-i***ge: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;"> <h5 style="text-align: center; ***rgin-top: 15px;">产品数据</h5> <div class="row" style="height: 25%; ***rgin-bottom: 10px; "> <h6 style="background-i***ge: 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%; ***rgin-bottom: 10px; "> <h6 style="background-i***ge: 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%;"> <h6 style="background-i***ge: 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-i***ge: url(img/title.png); background-size: 70%; background-repeat: no-repeat; background-position: center top;"> <h5 style="text-align: center; ***rgin-top: 15px;">专注数据可视化，助力企业智能化</h5> <div class="row" id="container_m1_1" style="height: 92%; background-i***ge: 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-i***ge: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;"> <h5 style="text-align: center; ***rgin-top: 15px;">运营概览</h5> <div class="row" style="height: 27%; ***rgin-bottom: 10px; "> <h6 style="background-i***ge: 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%; ***rgin-bottom: 10px; "> <h6 style="background-i***ge: 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%; "> <h6 style="background-i***ge: 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-i***ge: url(img/box.png); background-size: 98% 98%; background-repeat: no-repeat;"> <h5 style="text-align: center; ***rgin-top: 15px;">团队风采</h5> </h5> <div class="row" style="height: 30%;"> <div class="col-6" style="height: 100%; background-i***ge: url(img/box4.png); background-size: 90% 98%; background-repeat: no-repeat; background-position: center top;"> <h6 style="background-i***ge: 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-i***ge: url(img/box4.png); background-size: 90% 98%; background-repeat: no-repeat; background-position: left top;"> <h6 style="background-i***ge: 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%; ***rgin-bottom: 10px;"> <h6 style="background-i***ge: 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%; ***rgin-bottom: 10px;"> <h6 style="background-i***ge: 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>& ltdiv id = & # 034vue _ app & # 034class = & # 034容器-流体"& gt& lt！-标题->；& ltdiv class = & # 034row & # 034style = & # 034身高:8%；"& gt& lth3 style = & # 034文本对齐:居中；背景-图片:URL(img/header . png)；背景尺寸:100% 100%；"& gt[29]大数据可视化屏幕-企业综合信息

:<div class = & # 034row & # 034style = & # 034身高:90%；"& gt& lt！-left 1-->:<div class = & # 034col-2 "id = & # 034container _ l1 & # 034style = & # 034身高:100%；背景-图片:URL(img/box . png)；背景尺寸:98% 98%；背景-重复:不重复；"& gt& lth5 style = & # 034文本对齐:居中；边距-顶部:15px"& gt公司简介

2.JSON通信数据定义

Bar_ROA.json如下

{ "xAxis & # 034: { "数据": [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10"] }, "系列": [ { "数据": [ 84, 76, 99, 51, 65, 98, 72, 100, 67, 87 ] } ]}

3.前端JS & # 8211时序更新控制

支持独立控制每个电子海图的时间更新间隔。

//执行数据更新函数setinterval(function(){ async _ echart _ bar _ horizontal(container，path _ bar _ horizontal+"bar _ horizontal.json & # 034);}, 1000);

4.后端flask服务器

from Flask import Flask app = Flask(_ _ name _ _，static _ folder = & # 034静态"，template _ folder = & # 034模板")#主程序在这里if _ _ name _ _ = & # 034_ _ ***in _ _ & # 034:#启动线程并触发动态数据a = threading . thread(target = async JSON . loop)a . Start()#打开flask service app . run(host = '0.0.0.0'端口=88，调试=真)

四。操作效果

更多视觉案例

Yytav的数据可视化「精彩案例汇总」_ Yytav的博客-CSDN博客