29【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32

我是 YYDataV数据可视化 

专注于 数据可视化大屏，工厂扫码装箱系统 等

我的微信 6550523，多多交流 ~

本案例为32：9超宽分辨率的大屏。

效果展示

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

2.鼠标右键切换主题 

代码中预置了12个主题风格，实际开发中可根据实际情况二次增加。

 切换个主题，我们可以看到：主题的配色变化了。

 一. 确定需求方案 

1. 屏幕分辨率

这个案例的大屏分辨率是32:9，超炫的的宽屏比。

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

2. 部署方式 

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

二. 整体架构设计

1. 前端Echarts开源库：使用 WebStorm 编辑器；
2. 后端 http服务器：基于 Python 实现，使用 Pycharm 或 VSCode 编辑器；
3. 数据传输格式：JSON；
4. 数据源类型：JSON文件。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
5. 数据更新方式：采用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; ">&nbsp;&nbsp;&nbsp;&nbsp;营业额达成率</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; ">&nbsp;&nbsp;&nbsp;&nbsp;利润达成率</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; ">&nbsp;&nbsp;企业文化</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; ">&nbsp;&nbsp;市值增长</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; ">&nbsp;&nbsp;产品人力分布</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; ">&nbsp;&nbsp;日活数据</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; ">&nbsp;&nbsp;产品印象</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; ">&nbsp;&nbsp;客户企业画像</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; ">&nbsp;&nbsp;资产负债率</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; ">&nbsp;&nbsp;订单完成率</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; ">&nbsp;&nbsp;&nbsp;&nbsp;性别分布</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; ">&nbsp;&nbsp;&nbsp;&nbsp;年龄分布</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; ">&nbsp;&nbsp;开发产品分布</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; ">&nbsp;&nbsp;团队精神</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 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<!-- 更多资料参考我的博客主页  -->
/<!-- 更多案例参考 -->
：6550523  欢迎多多交流

五. 运行效果

六. 源码下载 

29【源码】数据可视化大屏：基于Echarts+PythonFlask实现的32-9超宽大屏-企业综合信息.zip-企业管理文档类资源-CSDN下载

更多可视化案例

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

29【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32

我是 YYDataV数据可视化 

专注于 数据可视化大屏，工厂扫码装箱系统 等

我的微信 6550523，多多交流 ~

本案例为32：9超宽分辨率的大屏。

效果展示

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

2.鼠标右键切换主题 

代码中预置了12个主题风格，实际开发中可根据实际情况二次增加。

 切换个主题，我们可以看到：主题的配色变化了。

 一. 确定需求方案 

1. 屏幕分辨率

这个案例的大屏分辨率是32:9，超炫的的宽屏比。

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

2. 部署方式 

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

二. 整体架构设计

1. 前端Echarts开源库：使用 WebStorm 编辑器；
2. 后端 http服务器：基于 Python 实现，使用 Pycharm 或 VSCode 编辑器；
3. 数据传输格式：JSON；
4. 数据源类型：JSON文件。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
5. 数据更新方式：采用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; ">&nbsp;&nbsp;&nbsp;&nbsp;营业额达成率</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; ">&nbsp;&nbsp;&nbsp;&nbsp;利润达成率</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; ">&nbsp;&nbsp;企业文化</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; ">&nbsp;&nbsp;市值增长</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; ">&nbsp;&nbsp;产品人力分布</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; ">&nbsp;&nbsp;日活数据</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; ">&nbsp;&nbsp;产品印象</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; ">&nbsp;&nbsp;客户企业画像</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; ">&nbsp;&nbsp;资产负债率</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; ">&nbsp;&nbsp;订单完成率</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; ">&nbsp;&nbsp;&nbsp;&nbsp;性别分布</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; ">&nbsp;&nbsp;&nbsp;&nbsp;年龄分布</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; ">&nbsp;&nbsp;开发产品分布</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; ">&nbsp;&nbsp;团队精神</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 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<!-- 更多资料参考我的博客主页  -->
/<!-- 更多案例参考 -->
：6550523  欢迎多多交流

五. 运行效果

六. 源码下载 

29【源码】数据可视化大屏：基于Echarts+PythonFlask实现的32-9超宽大屏-企业综合信息.zip-企业管理文档类资源-CSDN下载

更多可视化案例

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客