【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传_YYDataV_echarts数据可视化

未知 02-07 1359

效果展示

多主题样式

一、?确定需求方案

1、确定产品上线部署的屏幕分辨率

2、部署方式?

二、整体架构设计

三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码 - 页面整体布局?

2、前端JS代码 - Echarts option设置

3、JSON 数据通信格式定义

4、前端数据定时更新控制

5、后端 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) 四、上线运行效果

五、启动命令  python main.py  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

https://download.csdn.net/download/lildkdkdkjf/77313397

?更多精彩案例

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