35【源码】数据可视化：基于 Echarts + Python 动态实时大屏

编程入门行业动态更新时间:2024-10-22 18:32:52

35【源码】数据可视化：基于 Echarts + Python 动态<a href=https://www.elefans.com/category/jswz/34/1771422.html style= 实时大屏"/>

35【源码】数据可视化：基于 Echarts + Python 动态实时大屏

效果图展示

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

说明: 其中 总销售额，折扣率，完成率，售罄率，同比，商品销售排名 做了动态实时更新处理。

2.静态切片效果图

一、确定需求方案

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

本案例基于16:9 屏宽比，F11全屏显示。

2、部署方式

基于免安装可执行程序：支持Windows、Linux、Mac等各种操作系统；将程序复制到服务器上即可，无需其它环境依赖；

观看方式：既可在服务器上直接观看程序界面，也可在远程用浏览器打开播放，例如Chrome浏览器、360浏览器等。

二、整体架构设计

前端基于Echarts开源库设计，使用WebStorm编辑器；
后端基于Python Flask实现，使用 Vscode 或 Pycharm编辑器；
数据传输格式：JSON；
数据源类型：目前采用JSON文件方式，可自行添加支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加pandas支持Excel表格等，还可以定制HTTP API接口方式。
数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；

三、编码实现（关键代码）

1、前端html代码 - 页面布局主要基于div


<body><!-- 头部模块 --><div class="header"><div class="title"><span>奶茶门店销售业绩数据中心</span></div><div class="time"><span></span></div><div class="company"><span>深圳市</span><span>一杯奶茶</span></div></div><!-- 主题模块 --><div class="main"><div class="animate"><!-- 浮动层 --><div class="float"><div class="floating1"><div id="roate1"><div class="roate-item"><p>1111</p><span>销售额</span></div><div class="roate-item"><p>0.7%</p><span>同比</span></div><div class="roate-item"><p>77%</p><span>完成率</span></div></div><p class="pm">孙一付</p></div><div class="floating2"><div id="roate2"><div class="roate-item2"><p>2222</p><span>销售额</span></div><div class="roate-item2"><p>0.6%</p><span>同比</span></div><div class="roate-item2"><p>66%</p><span>完成率</span></div></div><p class="pm2">赵二开</p></div><div class="floating3"><div id="roate3"><div class="roate-item3"><p>12356</p><span>销售额</span></div><div class="roate-item3"><p>0.5%</p><span>同比</span></div><div class="roate-item3"><p>555%</p><span>完成率</span></div></div><p class="pm3">王工</p></div><div class="floating4"><div id="roate4"><div class="roate-item4"><p>12356</p><span>销售额</span></div><div class="roate-item4"><p>0.4%</p><span>同比</span></div><div class="roate-item4"><p>44%</p><span>完成率</span></div></div><p class="pm4">李工</p></div><div class="floating5"><div id="roate5"><div class="roate-item5"><p>12356</p><span>销售额</span></div><div class="roate-item5"><p>0.3%</p><span>同比</span></div><div class="roate-item5"><p>33%</p><span>完成率</span></div></div><p class="pm5">张工</p></div></div><div class="sum"><div class="data"><p>总销售额</p><span id="sell_total">2621526</span></div><div class="cicle1"></div><canvas id="canvas1"></canvas><canvas id="canvas2"></canvas><div class="data1"><div class="qiu"><p id="qiu1">1%</p></div><span>折扣率</span></div><div class="data2"><div class="qiu"><p id="qiu2">2%</p></div><span>售罄率</span></div><div class="data3"><div class="qiu"><p id="qiu3">3%</p></div><span>完成率</span></div><div class="data4"><div class="qiu"><p id="qiu4">4%</p></div><span>同比</span></div></div></div><div class="charts"><div class="charts1"><div class="charts-title"><span>产品销售情况分析</span></div><div id="container_sale" class="charts-content1 content"></div></div><div class="charts2"><div class="charts-title"><span>商品销售排名</span></div><div class="charts-content2 content"><table><thead><tr><td>排名</td><td>门店</td><td>销售额</td><td>完成情况</td></tr></thead><tbody><tr><td>01</td><td>东门门店</td><td id="sell1">25947元</td><td id="percent1" style="color: #dbbd73">85%<span class="chart1"></span></td></tr><tr><td>02</td><td>老街门店</td><td id="sell2">25947元</td><td id="percent2" style="color: #4bd8ba">85%<span class="chart2"></span></td></tr><tr><td>03</td><td>华强门店</td><td id="sell3">25947元</td><td id="percent3" style="color: #4bd8ba">85%<span class="chart3"></span></td></tr><tr><td>04</td><td>上步门店</td><td id="sell4">25947元</td><td id="percent4" style="color: #4bd8ba">85%<span class="chart4"></span></td></tr><tr><td>05</td><td>下沙门店</td><td id="sell5">25947元</td><td id="percent5" style="color: #dbbd73">85%<span class="chart5"></span></td></tr><tr><td>06</td><td>南山门店</td><td id="sell6">25947元</td><td id="percent6" style="color: #4bd8ba">85%<span class="chart6"></span></td></tr></tbody></table></div></div></div></div>
</body>

2. 前端JS - echarts图表

function init_echart_bar_ROA(container) {var chartDom = document.getElementById(container);var myChart = echarts.init(chartDom, window.gTheme);var option;option = {title: {// text: "资产负债率",//top: "5%",//left: "2%",textStyle: {// color: "#00ffff",fontSize: "16",},},grid: {left: "3%",right: "15%",bottom: "10%",top: "20%",containLabel: true,},tooltip: {trigger: "item",formatter: "{b}日: {c} 亿元",position: function (p) {//其中p为当前鼠标的位置return [p[0] + 10, p[1] - 10];},},xAxis: {name: "日期",type: "category",nameTextStyle: {color: "rgba(255,255,255,.8)",fontSize: 12,},data: [],axisLabel: {textStyle: {color: "rgba(255,255,255,.8)",fontSize: 14,},},axisLine: {lineStyle: {color: "rgba(255,255,255,.2)",},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",},},},yAxis: {name: "%",type: "value",min: 0,max: 100,nameTextStyle: {color: "rgba(255,255,255,.8)",fontSize: 12,},axisLabel: {textStyle: {color: "rgba(255,255,255,.8)",fontSize: 14,},},axisLine: {lineStyle: {color: "rgba(255,255,255,.2)",},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",},},},series: [{data: [],type: "bar",showBackground: true,backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",},},],};option && myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

3. 前端JS - 数据定时更新控制

支持在每个echarts图表中独立控制定时更新的间隔。

  var container = "container_sale";init_echart_bar_ROA(container);// 定时1s执行数据更新函数setInterval(function () {async_echart_bar_ROA(container, path_bar_ROA + "bar_ROA.json");}, 1000);

4. 后端 Python Flask 代码


app = Flask(__name__, static_folder="static", template_folder="template")@app.route('/')
def index():return redirect('/static/index.html')# 主程序在这里
if __name__ == "__main__":a = threading.Thread(target=loop)a.start()# 开启 flask 服务app.run(host='127.0.0.1', port=80, debug=True)