目录
效果展示
多主题样式
一、确定需求方案
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=0allowfullscreen="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./<!-- 更多案例参考 -->/lildkdkdkjf/article/details/120705616我的微信号：6550523 欢迎多多交流
六、源码下载
25【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏范例 - 企业宣传.zip
/download/lildkdkdkjf/77313397
更多精彩案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客
