• 35【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 门店销售业绩数据中心

    效果图展示 

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

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

    ​

     2.静态切片效果图

    一、确定需求方案

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

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

    2、部署方式 

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

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

    二、整体架构设计

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

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

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

    1.  
    2. <body>
    3.     <!-- 头部模块 -->
    4.     <div class="header">
    5.         <div class="title">
    6.             <span>奶茶门店销售业绩数据中心</span>
    7.         </div>
    8.         <div class="time">
    9.             <span></span>
    10.         </div>
    11.         <div class="company">
    12.             <span>深圳市</span>
    13.             <span>一杯奶茶</span>
    14.         </div>
    15.     </div>
    16.  
    17.     <!-- 主题模块 -->
    18.     <div class="main">
    19.         <div class="animate">
    20.             <!-- 浮动层 -->
    21.             <div class="float">
    22.                 <div class="floating1">
    23.                     <div id="roate1">
    24.                         <div class="roate-item">
    25.                             <p>1111</p>
    26.                             <span>销售额</span>
    27.                         </div>
    28.                         <div class="roate-item">
    29.                             <p>0.7%</p>
    30.                             <span>同比</span>
    31.                         </div>
    32.                         <div class="roate-item">
    33.                             <p>77%</p>
    34.                             <span>完成率</span>
    35.                         </div>
    36.                     </div>
    37.                     <p class="pm">孙一付</p>
    38.                 </div>
    39.                 <div class="floating2">
    40.                     <div id="roate2">
    41.                         <div class="roate-item2">
    42.                             <p>2222</p>
    43.                             <span>销售额</span>
    44.                         </div>
    45.                         <div class="roate-item2">
    46.                             <p>0.6%</p>
    47.                             <span>同比</span>
    48.                         </div>
    49.                         <div class="roate-item2">
    50.                             <p>66%</p>
    51.                             <span>完成率</span>
    52.                         </div>
    53.                     </div>
    54.                     <p class="pm2">赵二开</p>
    55.                 </div>
    56.                 <div class="floating3">
    57.                     <div id="roate3">
    58.                         <div class="roate-item3">
    59.                             <p>12356</p>
    60.                             <span>销售额</span>
    61.                         </div>
    62.                         <div class="roate-item3">
    63.                             <p>0.5%</p>
    64.                             <span>同比</span>
    65.                         </div>
    66.                         <div class="roate-item3">
    67.                             <p>555%</p>
    68.                             <span>完成率</span>
    69.                         </div>
    70.                     </div>
    71.                     <p class="pm3">王工</p>
    72.                 </div>
    73.                 <div class="floating4">
    74.                     <div id="roate4">
    75.                         <div class="roate-item4">
    76.                             <p>12356</p>
    77.                             <span>销售额</span>
    78.                         </div>
    79.                         <div class="roate-item4">
    80.                             <p>0.4%</p>
    81.                             <span>同比</span>
    82.                         </div>
    83.                         <div class="roate-item4">
    84.                             <p>44%</p>
    85.                             <span>完成率</span>
    86.                         </div>
    87.                     </div>
    88.                     <p class="pm4">李工</p>
    89.                 </div>
    90.                 <div class="floating5">
    91.                     <div id="roate5">
    92.                         <div class="roate-item5">
    93.                             <p>12356</p>
    94.                             <span>销售额</span>
    95.                         </div>
    96.                         <div class="roate-item5">
    97.                             <p>0.3%</p>
    98.                             <span>同比</span>
    99.                         </div>
    100.                         <div class="roate-item5">
    101.                             <p>33%</p>
    102.                             <span>完成率</span>
    103.                         </div>
    104.                     </div>
    105.                     <p class="pm5">张工</p>
    106.                 </div>
    107.             </div>
    108.             <div class="sum">
    109.                 <div class="data">
    110.                     <p>总销售额</p>
    111.                     <span id="sell_total">2621526</span>
    112.                 </div>
    113.                 <div class="cicle1"></div>
    114.                 <canvas id="canvas1"></canvas>
    115.                 <canvas id="canvas2"></canvas>
    116.                 <div class="data1">
    117.                     <div class="qiu">
    118.                         <p id="qiu1">1%</p>
    119.                     </div>
    120.                     <span>折扣率</span>
    121.                 </div>
    122.                 <div class="data2">
    123.                     <div class="qiu">
    124.                         <p id="qiu2">2%</p>
    125.                     </div>
    126.                     <span>售罄率</span>
    127.                 </div>
    128.                 <div class="data3">
    129.                     <div class="qiu">
    130.                         <p id="qiu3">3%</p>
    131.                     </div>
    132.                     <span>完成率</span>
    133.                 </div>
    134.                 <div class="data4">
    135.                     <div class="qiu">
    136.                         <p id="qiu4">4%</p>
    137.                     </div>
    138.                     <span>同比</span>
    139.                 </div>
    140.             </div>
    141.         </div>
    142.         <div class="charts">
    143.             <div class="charts1">
    144.                 <div class="charts-title">
    145.                     <span>产品销售情况分析</span>
    146.                 </div>
    147.                 <div id="container_sale" class="charts-content1 content"></div>
    148.             </div>
    149.             <div class="charts2">
    150.                 <div class="charts-title">
    151.                     <span>商品销售排名</span>
    152.                 </div>
    153.                 <div class="charts-content2 content">
    154.                     <table>
    155.                         <thead>
    156.                             <tr>
    157.                                 <td>排名</td>
    158.                                 <td>门店</td>
    159.                                 <td>销售额</td>
    160.                                 <td>完成情况</td>
    161.                             </tr>
    162.                         </thead>
    163.                         <tbody>
    164.                             <tr>
    165.                                 <td>01</td>
    166.                                 <td>东门门店</td>
    167.                                 <td id="sell1">25947元</td>
    168.                                 <td id="percent1" style="color: #dbbd73">85%<span class="chart1"></span></td>
    169.                             </tr>
    170.                             <tr>
    171.                                 <td>02</td>
    172.                                 <td>老街门店</td>
    173.                                 <td id="sell2">25947元</td>
    174.                                 <td id="percent2" style="color: #4bd8ba">85%<span class="chart2"></span></td>
    175.                             </tr>
    176.                             <tr>
    177.                                 <td>03</td>
    178.                                 <td>华强门店</td>
    179.                                 <td id="sell3">25947元</td>
    180.                                 <td id="percent3" style="color: #4bd8ba">85%<span class="chart3"></span></td>
    181.                             </tr>
    182.                             <tr>
    183.                                 <td>04</td>
    184.                                 <td>上步门店</td>
    185.                                 <td id="sell4">25947元</td>
    186.                                 <td id="percent4" style="color: #4bd8ba">85%<span class="chart4"></span></td>
    187.                             </tr>
    188.                             <tr>
    189.                                 <td>05</td>
    190.                                 <td>下沙门店</td>
    191.                                 <td id="sell5">25947元</td>
    192.                                 <td id="percent5" style="color: #dbbd73">85%<span class="chart5"></span></td>
    193.                             </tr>
    194.                             <tr>
    195.                                 <td>06</td>
    196.                                 <td>南山门店</td>
    197.                                 <td id="sell6">25947元</td>
    198.                                 <td id="percent6" style="color: #4bd8ba">85%<span class="chart6"></span></td>
    199.                             </tr>
    200.                         </tbody>
    201.                     </table>
    202.                 </div>
    203.             </div>
    204.         </div>
    205.     </div>
    206. </body>

    2. 前端JS - echarts图表

    1. function init_echart_bar_ROA(container) {
    2.     var chartDom = document.getElementById(container);
    3.     var myChart = echarts.init(chartDom, window.gTheme);
    4.     var option;
    5.  
    6.     option = {
    7.         title: {
    8.             // text: "资产负债率",
    9.             //top: "5%",
    10.             //left: "2%",
    11.             textStyle: {
    12.                 // color: "#00ffff",
    13.                 fontSize: "16",
    14.             },
    15.         },
    16.         grid: {
    17.             left: "3%",
    18.             right: "15%",
    19.             bottom: "10%",
    20.             top: "20%",
    21.             containLabel: true,
    22.         },
    23.         tooltip: {
    24.             trigger: "item",
    25.             formatter: "{b}日: {c} 亿元",
    26.             position: function (p) {
    27.                 //其中p为当前鼠标的位置
    28.                 return [p[0] + 10, p[1] - 10];
    29.             },
    30.         },
    31.         xAxis: {
    32.             name: "日期",
    33.             type: "category",
    34.             nameTextStyle: {
    35.                 color: "rgba(255,255,255,.8)",
    36.                 fontSize: 12,
    37.             },
    38.             data: [],
    39.             axisLabel: {
    40.                 textStyle: {
    41.                     color: "rgba(255,255,255,.8)",
    42.                     fontSize: 14,
    43.                 },
    44.             },
    45.             axisLine: {
    46.                 lineStyle: {
    47.                     color: "rgba(255,255,255,.2)",
    48.                 },
    49.             },
    50.             splitLine: {
    51.                 lineStyle: {
    52.                     color: "rgba(255,255,255,.1)",
    53.                 },
    54.             },
    55.         },
    56.         yAxis: {
    57.             name: "%",
    58.             type: "value",
    59.             min: 0,
    60.             max: 100,
    61.             nameTextStyle: {
    62.                 color: "rgba(255,255,255,.8)",
    63.                 fontSize: 12,
    64.             },
    65.             axisLabel: {
    66.                 textStyle: {
    67.                     color: "rgba(255,255,255,.8)",
    68.                     fontSize: 14,
    69.                 },
    70.             },
    71.             axisLine: {
    72.                 lineStyle: {
    73.                     color: "rgba(255,255,255,.2)",
    74.                 },
    75.             },
    76.             splitLine: {
    77.                 lineStyle: {
    78.                     color: "rgba(255,255,255,.1)",
    79.                 },
    80.             },
    81.         },
    82.         series: [
    83.             {
    84.                 data: [],
    85.                 type: "bar",
    86.                 showBackground: true,
    87.                 backgroundStyle: {
    88.                     color: "rgba(180, 180, 180, 0.2)",
    89.                 },
    90.             },
    91.         ],
    92.     };
    93.  
    94.     option && myChart.setOption(option);
    95.     window.addEventListener("resize", function () {
    96.         myChart.resize();
    97.     });
    98. }

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

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

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

    4. 后端 Python Flask 代码

    1.  
    2. app = Flask(__name__, static_folder="static", template_folder="template")
    3.  
    4.  
    5. @app.route('/')
    6. def index():
    7.     return redirect('/static/index.html')
    8.  
    9.  
    10. # 主程序在这里
    11. if __name__ == "__main__":
    12.     a = threading.Thread(target=loop)
    13.     a.start()
    14.  
    15.     # 开启 flask 服务
    16.     app.run(host='127.0.0.1', port=80, debug=True)

    四、运行效果

    五、更多案例 

    35 源码数据可视化：基于 Echarts + Python 动态实时大屏 - 门店销售业绩数据中心.zip

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


    YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客

    【工厂扫码打印&扫码装箱&错误追溯系统】完整案例详解（Python&PyQt 源码&Mysql数据库）_YYDataV数据可视化的博客-CSDN博客_pyqt案例

    感谢开源分享的前端代码。

  • 相关阅读:
    class的流光效果
    Serverless Devs 重大更新，基于 Serverless 架构的 CI/CD 框架：Serverless-cd
    node连接mongoose数据库流程
    Unity微信小游戏登录授权获取用户信息
    开发环境安装---Visual Studio Code
    navicat连接postgresql报错解决方案
    计组-机器字长、存储字长、指令字长以及和他们有关的机器位数
    【中间件】ElasticSearch：ES的基本概念与基本使用
    探究Kafka原理-1.初识Kafka
    【Web】Java反序列化之CC6--HashMap版
  • 原文地址：https://blog.csdn.net/lildkdkdkjf/article/details/126895274