devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Li_阴宅 | 2024-08-13 10:37:57

赞

踩

数据可视化大屏源代码

效果图展示

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案例

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

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/974400
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号