25数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传
Posted YYDataV
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了25数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传相关的知识，希望对你有一定的参考价值。
目录
三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
写在前面，最近收到了小伙伴的建议，大屏的HTTP服务器是否可以由原来最简单的HTTPSERVER，再支持下 Python Flask 框架，这个框架在他们的工作中比较常用，又便于灵活扩展，所以应小伙伴之建议，诞生了这篇【基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传】案例。
效果展示
一、 确定需求方案
1、确定产品上线部署的屏幕分辨率
根据电脑分辨率屏幕自适应显示，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 轮询方式 。在实际开发需求中，采用后端数据实时更新，实时推送到前端这种方式具有实用性；
三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、前端html代码 - 页面整体布局
<div class="container_fluid">
<!-- 标题栏 -->
<div class="row_fluid">
<div id="container_1" class="col-xs-12 col-md-12">
</div>
</div>
<!-- 上栏 -->
<div class="row_fluid">
<!-- 上左栏 -->
<div id="container_2" class="col-xs-12 col-md-4">
<div id="container_2_1" class="col-xs-12 col-md-6">
</div>
<div id="container_2_2" class="col-xs-12 col-md-6">
</div>
<div id="container_2_3" class="col-xs-12 col-md-12">
</div>
</div>
<!-- 上中栏 -->
<div id="container_3" class="col-xs-12 col-md-4">
<iframe src="myimg/video.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
allowfullscreen="true" width="100%" height="100%"> </iframe>
</div>
<!-- 上右栏 -->
<div id="container_4" class="col-xs-12 col-md-4">
<div id="container_4_1" class="col-xs-12 col-md-3">
</div>
<div id="container_4_2" class="col-xs-12 col-md-3">
</div>
<div id="container_4_3" class="col-xs-12 col-md-3">
</div>
<div id="container_4_4" class="col-xs-12 col-md-3">
</div>
<div id="container_4_5" class="col-xs-12 col-md-6">
</div>
<div id="container_4_6" class="col-xs-12 col-md-6">
</div>
</div>
</div>
</div>
<!-- 下栏 -->
<div class="row_fluid">
<!-- 下左栏 -->
<div id="container_5" class="col-xs-12 col-md-4">
<div id="container_5_1" class="col-xs-12 col-md-12">
</div>
<div id="container_5_2" class="col-xs-12 col-md-12">
</div>
</div>
<!-- 下中栏 -->
<div id="container_6" class="col-xs-12 col-md-4">
</div>
<!-- 下右栏 -->
<div class="col-xs-12 col-md-4">
<div id="container_7" class="row_fluid">
<div id="container_7_1" class="col-xs-12 col-md-6">
</div>
<div id="container_7_2" class="col-xs-12 col-md-6">
</div>
<div id="container_7_3" class="col-xs-12 col-md-12">
</div>
</div>
</div>
</div>2、前端JS代码 - Echarts option设置
var idContainer_4_5 = "container_4_5";
function initEchart_4_5()
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(idContainer_4_5), gTheme);
option =
title:
text: "年龄分布",
top: "10%",
left: "center",
textStyle:
color: "#17c0ff",
fontSize: "12",
,
,
tooltip:
trigger: "item",
formatter: "a <br/>b: c (d%)",
position: function (p)
//其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
,
,
grid:
left: "0",
right: "10",
bottom: "25%",
top: "20%",
containLabel: true,
,
xAxis:
type: "category",
data: [],
axisLabel:
textStyle:
color: "rgba(255,255,255,.8)",
fontSize: 10,
,
,
axisLine:
lineStyle:
color: "rgba(255,255,255,.2)",
,
,
splitLine:
lineStyle:
color: "rgba(255,255,255,.1)",
,
,
,
yAxis:
type: "value",
data: [],
axisLabel:
textStyle:
color: "rgba(255,255,255,.8)",
fontSize: 10,
,
,
axisLine:
lineStyle:
color: "rgba(255,255,255,.2)",
,
,
splitLine:
lineStyle:
color: "rgba(255,255,255,.1)",
,
,
,
series: [
name: "年龄分布",
type: "bar",
stack: "total",
label:
show: true,
,
,
],
;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function ()
myChart.resize();
);
function getKeys(dataList)
var keys = [];
var len = dataList.length;
for (var i = 0; i < len; i++) keys.push(dataList[i].name);
return keys;
function asyncData_4_5()
$.getJSON("myjson/bar_age.json").done(function (data)
var myChart = echarts.init(document.getElementById(idContainer_4_5));
myChart.setOption(
xAxis: data: getKeys(data) ,
series: [ data: data ],
);
); //end $.getJSON
initEchart_4_5();
3、JSON 数据通信格式定义
["name": "<18", "value": 2962, "name": "18-23", "value": 3119, "name": "24-30", "value": 2562, "name": "31-40", "value": 1024, "name": "41-50", "value": 2791, "name": ">50", "value": 4073]4、前端数据定时更新控制
function asyncData()
asyncData_4_5();
asyncData_4_6();
asyncData_5_1();
asyncData_5_2();
asyncData_6();
asyncData_7_1();
asyncData_7_2();
asyncData_7_3();
// 定时从服务器更新数据
setTimeout(asyncData, 1000);
5、后端 flask 服务器
app = Flask(__name__, static_folder="static", template_folder="template")
@app.route('/')
def hello_world():
return 'Hello World!'
# 主程序在这里
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 欢迎多多交流六、源码下载
25【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏范例 - 企业宣传.zip
更多精彩案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客
以上是关于25数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传的主要内容，如果未能解决你的问题，请参考以下文章
基于VUE + Echarts 实现可视化数据大屏文化大数据
基于VUE + Echarts 实现可视化数据大屏消防大数据
基于Echarts+百度地图+Three.js的数据可视化系统