软件定制开发供应商34【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 视频平台

软件定制开发供应商效果图展示

1.软件定制开发供应商动态实时更新数据效果图

说明: 其中 今日抓拍，抓拍总数，软件定制开发供应商预警信息统计，软件定制开发供应商监控点位统计图表 做了动态实时更新处理。

​

 2.静态切片效果图

 

一、确定需求方案

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图表

  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)

四、运行效果

五、更多案例 


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

 

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发