• 34【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 视频平台

    效果图展示

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

    说明: 其中 今日抓拍，抓拍总数，预警信息统计，监控点位统计图表 做了动态实时更新处理。

    3a16d4493655406d95d79cdcd2e85b86.gif​

     2.静态切片效果图

    24c1d654b6b649c2bb00b5844c902caf.png

     

    一、确定需求方案

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

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

    2、部署方式 

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

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

    二、整体架构设计

    1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
    2. 后端基于Python Flask实现，使用 Vscode 编辑器；
    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.     <div class="body">
    4.         <div class="head-box">
    5.             <div class="logout-box"></div>
    6.             <div class="link-box"></div>
    7.             南方软件视频平台大屏中心
    8.             <div class="time-box" id="time">2022年9月1日</div>
    9.         </div>
    10.         <div class="main">
    11.             <!--left-->
    12.             <div class="col">
    13.                 <!--巡查视频问题-->
    14.                 <div class="col-box1">
    15.                     <div class="col-title">巡查视频问题</div>
    16.                     <div class="col-main">
    17.                         <ul class="xcspwt-box js-xcspwt">
    18.                             <li>
    19.                                 <span>张三丰</span>
    20.                                 <span title="南京信息工程大学地铁站1号出口监控点">南京信息工程大学地铁站1号出口监控点</span>
    21.                                 <span title="视频信号不稳定">视频信号不稳定</span>
    22.                             </li>
    23.                             .......
    24.                         </ul>
    25.                     </div>
    26.                 </div>
    27.                 <!--巡查视频问题统计-->
    28.                 <div class="col-box1">
    29.                     <div class="col-title">巡查视频问题统计</div>
    30.                     <div class="col-main">
    31.                         <!--视频问题统计-->
    32.                         <ul class="spwtzgtj-box">
    33.                             <li>
    34.                                 <span>问题总数</span>
    35.                                 <span>234</span>
    36.                             </li>
    37.                             <li>
    38.                                 <span>已整改</span>
    39.                                 <span>34</span>
    40.                             </li>
    41.                             <li>
    42.                                 <span>未整改</span>
    43.                                 <span>200</span>
    44.                             </li>
    45.                         </ul>
    46.                         <div class="spwttj-echarts" id="spwttjEchart">
    47.  
    48.                         </div>
    49.  
    50.                     </div>
    51.                 </div>
    52.             </div>
    53.             <!--center-->
    54.             <div class="col">
    55.                 <!--预警信息推送-->
    56.                 <div class="col-box1">
    57.                     <ul class="zpsl-box">
    58.                         <li>
    59.                             <span>今日抓拍</span>
    60.                             <span id="today_snap">1245条</span>
    61.                         </li>
    62.                         <li>
    63.                             <span>抓拍总数</span>
    64.                             <span id="total_snap">3421条</span>
    65.                         </li>
    66.                     </ul>
    67.                     <div class="col-title">预警信息推送</div>
    68.                     <div class="col-main js-tjxxtsxq" style="height: calc(100% - 190px);margin-top: 10px">
    69.                         <div class="yjxxts-box">
    70.                             <img src="img/12.png">
    71.                         </div>
    72.                         <div class="yjxxts-box">
    73.                             <img src="img/12.png">
    74.                         </div>
    75.                         <div class="yjxxts-box">
    76.                             <img src="img/12.png">
    77.                         </div>
    78.                     </div>
    79.                 </div>
    80.                 <!--预警信息统计-->
    81.                 <div class="col-box1">
    82.                     <div class="col-title">预警信息统计</div>
    83.                     <div class="col-main ">
    84.                         <ul class="yjxxtj-title js-tab">
    85.                             <li class="on">有人统计</li>
    86.                             <li>无人统计</li>
    87.                         </ul>
    88.                         <div class="yjxxtj-box">
    89.                             <ul class="wgxc-box js-wgxcBox">
    90.                                 <li>
    91.                                     <div class="wgxc-bar"><span id="wgxc_span1" class="wgxc-sl-bar"
    92.                                             style="height:10%"></span></div>
    93.                                     <div class="wgxcName">南京</div>
    94.                                 </li>
    95.                                 ......
    96.                             </ul>
    97.                         </div>
    98.                     </div>
    99.                 </div>
    100.             </div>
    101.             <!--right-->
    102.             <div class="col">
    103.                 <!--全市监控点位统计-->
    104.                 <div class="col-box1">
    105.                     <div class="col-title">
    106.                         全市监控点位统计
    107.                     </div>
    108.                     <div class="col-main">
    109.                         <div class="qsjk-box" id="qsjkdwEcharts">
    110.                             <!--全市监控点位-->
    111.                         </div>
    112.                     </div>
    113.                 </div>
    114.                 <!--系统公告&资源下载-->
    115.                 <div class="col-box1">
    116.                     <div class="col-title">
    117.                         <ul class="xtggzlxz-box js-tab js-xtggzlxz">
    118.                             <li class="on">资源下载</li>
    119.                             <li>系统公告</li>
    120.                         </ul>
    121.                     </div>
    122.                     <div class="col-main" style=" height:calc(100% - 75px);padding:20px 0;overflow: hidden">
    123.                         
    124.                        ......
    125.                     </div>
    126.                 </div>
    127.             </div>
    128.             <!--预警信息推送弹框-->
    129.             <div class="yjxxts-tkbox js-yjxxtsTkbox">
    130.                 <img src="img/12.png">
    131.                 <div class="yjxxts-xqbox">
    132.                     <div class="col-title">详情</div>
    133.                     <div class="yjxxts-xqmain">
    134.                         <table>
    135.                             <tr>
    136.                                 <td>监控点位</td>
    137.                                 <td>地铁站</td>
    138.                             </tr>
    139.                             <tr>
    140.                                 <td>预警时间</td>
    141.                                 <td>2018-10-21</td>
    142.                             </tr>
    143.                             <tr>
    144.                                 <td>预警类型</td>
    145.                                 <td>无人在岗</td>
    146.                             </tr>
    147.                             <tr>
    148.                                 <td>预警状态</td>
    149.                                 <td>已处理</td>
    150.                             </tr>
    151.                         </table>
    152.                     </div>
    153.                 </div>
    154.             </div>
    155.         </div>
    156.     </div>
    157. </body>

    2. 前端JS - echarts图表

    b02d67edc8514d16aee8f42efbbad7c4.png

    1. /**全市监控点位统计**/
    2.     var loadqsjkdw = function () {
    3.         var myCharts = echarts.init(document.getElementById('qsjkdwEcharts'));
    4.         var option = {
    5.             grid: {
    6.                 left: '5px',
    7.                 right: '0%',
    8.                 bottom: '18%',
    9.                 top:'10%',
    10.             },
    11.             tooltip: {
    12.                 show: "true",
    13.                 trigger: 'axis',
    14.                 axisPointer: { // 坐标轴指示器，坐标轴触发有效
    15.                     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    16.                 },
    17.                 formatter:'{b0}:{c0}'
    18.             },
    19.             yAxis: {
    20.                 show:false,
    21.                 splitLine: {show: false,
    22.                     lineStyle:{
    23.                         color:'#353E47'
    24.                     }
    25.                 },
    26.                 axisTick: {show: false},
    27.                 axisLine: {show: true,
    28.                     lineStyle:{
    29.                         color:'#353E47'
    30.                     }},
    31.                 axisLabel: {
    32.                     textStyle: {
    33.                         color: '#ffffff'
    34.                     },
    35.                     formatter:function(value,index){
    36.                         var r = '';
    37.                         if(value>100000000){//亿
    38.                             r = (value/100000000).toFixed(1) + '亿';
    39.                         }else if(value>10000){//万
    40.                             r = (value/10000).toFixed(1) + '万';
    41.                         }else{
    42.                             r = value;
    43.                         }
    44.                         return r;
    45.                     }
    46.                 }
    47.             },
    48.             xAxis: [
    49.                 {
    50.                     type: 'category',
    51.                     axisTick: {
    52.                         show: false
    53.                     },
    54.                     axisLine: {
    55.                         show: true,
    56.                         lineStyle: {
    57.                             color: '#353E47',
    58.                         }
    59.                     },
    60.                     axisLabel:{
    61.                         textStyle:{
    62.                             color:'#fff'
    63.                         },
    64.                         interval:0
    65.                     },
    66.                     data: ["南京","苏州","无锡","常州","南通","徐州","淮安","镇江","泰州"]
    67.                 }
    68.             ],
    69.             series: [
    70.                 {
    71.                     name: '',
    72.                     type: 'bar',
    73.                     barWidth:'20px',
    74.                     itemStyle: {
    75.                         normal: {
    76.                             show: true,
    77.                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    78.                                 offset: 0,
    79.                                 color: '#00d891'
    80.                             }, {
    81.                                 offset: 1,
    82.                                 color: '#00579a'
    83.                             }]),
    84.                             barBorderRadius: 50,
    85.                             borderWidth: 0,
    86.                             borderColor: '#333',
    87.                         }
    88.                     },
    89.                     label: {
    90.                         normal: {
    91.                             show: true,
    92.                             position: 'top',
    93.                             textStyle: {
    94.                                 color: '#fff'
    95.                             }
    96.                         }
    97.                     },
    98.                     data:qsjkdw,
    99.                 }
    100.  
    101.             ]
    102.         };
    103.         myCharts.clear();
    104.         myCharts.setOption(option);
    105.         myCharts.on("click",function(e){
    106.             loadsqjkdw();
    107.         });
    108.     };

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

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

    1.  var init = function () {
    2.         updateEcharts();
    3.         setInterval(function() {updateEcharts()},2000);//刷新周期设置
    4.  
    5.         xcwttj();
    6.         loadqsjkdw();;
    7.     };

    4. 后端 Python Flask 代码

    1. # -*- coding:utf-8 -*-
    2.  
    3. import io
    4. import os
    5. import sys
    6. import time
    7. import urllib
    8. import random
    9. import json
    10. from flask import Flask, redirect
    11. # 导入线程模块
    12. import threading
    13.  
    14. app = Flask(__name__, static_folder="static", template_folder="template")
    15.  
    16.  
    17. @app.route('/')
    18. def index():
    19.     return redirect('/static/index.html')
    20.  
    21.  
    22. @app.route('/get_snap')
    23. def get_snap():
    24.     jsonData = {}
    25.     jsonData['today_snap'] = random.randint(1, 100)
    26.     jsonData['total_snap'] = random.randint(1, 1000)
    27.     return json.dumps(jsonData)
    28.  
    29. @app.route('/qsjkdw')
    30. def qsjkdw():
    31.     jsonData = []
    32.     for x in range(9):
    33.         jsonData.append({"value": str(random.randint(1, 100))})
    34.     return json.dumps(jsonData)
    35.  
    36. @app.route('/get_yjxxtj')
    37. def get_yjxxtj():
    38.     jsonData = []
    39.     for x in range(6):
    40.         jsonData.append(random.randint(1, 100))
    41.     return json.dumps(jsonData)
    42.  
    43.  
    44. def loop():
    45.     time.sleep(10)
    46.     pass
    47.  
    48. # 主程序在这里
    49. if __name__ == "__main__":
    50.     # 开启线程，触发动态数据
    51.     a = threading.Thread(target=loop)
    52.     a.start()
    53.  
    54.     # 开启 flask 服务
    55.     app.run(host='127.0.0.1', port=80, debug=True)

    四、运行效果

    38f1b7e12d134fbda65ea7b3922ff8e6.gif

    五、更多案例 


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

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

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

     

     

  • 相关阅读:
    C3P Software 发布 Cast-Designer V7.7版本
    查网站域名历史，查域名有没有灰记录，查域名有多少外链的好工具
    前端常用的状态码
    毕业图形采集【个人】
    大语言模型LLM微调技术深度解析：Fine-tuning、Adapter-Tuning与Prompt Tuning的作用机制、流程及实践应用（LLM系列08）
    linux安全配置规范
    Spring Boot：自定义注解--annotation
    每日五问（java）
    【667. 优美的排列 II】
    C++ 特殊矩阵的压缩存储算法
  • 原文地址：https://blog.csdn.net/lildkdkdkjf/article/details/126682481