头图

基于 Echarts + Python Flask 动态实时大屏监管系统

效果展示

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

2.鼠标右键切换主题

一. 确定需求方案 

1. 屏幕分辨率

这个案例的分辨率是16:9,最常用的的宽屏比。

根据电脑分辨率屏幕自适应显示,F11全屏查看;

2. 部署方式 

B/S方式:支持Windows、Linux、Mac等各种主流操作系统;支持主流浏览器Chrome,Microsoft Edge,360等;服务器采用python语言编写,配置好python环境即可。

最近刚好整理了Python书籍资料电子版等资料,都打包好了,需要的小伙伴可直接前往gzh【Python编程学习圈】领取,关注回复关键词【学习资料】即可免费获取,包含有入门到进阶、爬虫、数据分析等方向的资料教程,不要错过啦!

二. 整体架构设计

  1. 前端Echarts开源库:使用 WebStorm 编辑器;
  2. 后端 http服务器:基于 Python 实现,使用 Pycharm 或 VSCode 编辑器;
  3. 数据传输格式:JSON;
  4. 数据源类型:JSON文件。实际开发需求中,支持定制HTTP API接口方式或其它各种类型数据库,如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
  5. 数据更新方式:采用http get 轮询方式 。在实际应用中,也可以视情况选择j监测后端数据实时更新,实时推送到前端的方式;

三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码)

1. 前端html代码

本次页面布局使用H5的 grid 布局,代码简单易操作。

<div class="grid-container">
        <div id="lo_0">
            <h2>32 数据可视化-银行监管系统</h2>
        </div>
        <div id="lo_1">
 
        </div>
        <div id="lo_2">
 
        </div>
        <div id="lo_3">
 
        </div>
        <div id="lo_4">
 
        </div>
        <div id="lo_5">
 
        </div>
        <div id="lo_6">
 
        </div>
        <div id="lo_7">
 
        </div>
        <div id="lo_8">
            <div style="height: 10%;">
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirmAdd')">新增金额</button>
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirm')">累计金额</button>
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'nowConfirm')">现有金额</button>
            </div>
            <div id="container_8" style="height: 90%;"></div>
        </div>
        <div id="lo_9">9</div>
        <div id="lo_10">10</div>
    </div>

grid-container 定义

.grid-container {
            display: grid;
            /* 6列,定义列宽 */
            grid-template-columns: 14% 14.5% 20% 20% 14.5% 14%;
            /* auto: 它用于自动设置行的高度,即取决于行中容器和内容的大小。*/
            grid-template-rows: 10% 25% 30% 30%;
            grid-gap: 10px;
            /* background-color: #2196F3; */
            padding: 0;
            width: 100%;
            height: 100%;
        }

对横跨多个行列的格子定义​​​​​​​

  #lo_5 {
            grid-area: 3 / 1 / 4 / 3;
        }

2. 前端JS - echarts图表​​​​​​​

function init_echart_line_visualMap(container) {
  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById(container), gTheme);
  option = {
    title: {
      text: "股票市值实时监测",
      // top: 0,
      // left: "center",
      textStyle: {
        // color: "#17c0ff",
        fontSize: "12",
      },
    },
 
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      },
    },
 
    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      top: "25%",
      containLabel: true,
    },
 
    xAxis: {
      name: "名称",
      type: "category",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          //fontSize: 14,
        },
        // formatter: "{value}%",
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    yAxis: {
      name: "亿元",
      type: "value",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          //fontSize: 14,
        },
        formatter: "{value}",
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    visualMap: {
      top: "top",
      left: "right",
      textStyle: {
        color: "rgba(255,255,255,.8)",
        //fontSize: 14,
      },
      pieces: [
        {
          gt: 0,
          lte: 100,
          color: "#FF0000",
        },
        {
          gt: 100,
          lte: 800,
          color: "#FFA500",
        },
        {
          gt: 800,
          lte: 900,
          color: "#2E8B57",
        },
      ],
    },
    series: [
      {
        name: "年龄分布",
        type: "line",
        // stack: "total",
        // label: {
        //   show: true,
        // },
        // 使用系统函数
        markPoint: {
          label: {
            textStyle: {
              color: "rgba(255,255,255,.8)",
              //fontSize: 14,
            },
          },
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
        // 自定义数据
        // markLine: {
        //   // 图形是否不响应和触发鼠标事件
        //   silent: true,
        //   label: {
        //     textStyle: {
        //       color: "rgba(255,255,255,.8)",
        //       //fontSize: 14,
        //     },
        //   },
        //   data: [
        //     {
        //       yAxis: 100,
        //       lineStyle: {
        //         color: "#FF0000",
        //       },
        //     },
        //     {
        //       yAxis: 800,
        //       lineStyle: {
        //         color: "#FFA500",
        //       },
        //     },
        //     {
        //       yAxis: 900,
        //       lineStyle: {
        //         color: "#2E8B57",
        //       },
        //     },
        //   ],
        // },
      },
    ],
  };
 
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
 
function getKeys(dataList) {
  var keys = [];
  var len = dataList.length;
  for (var i = 0; i < len; i++) keys.push(dataList[i].name);
  return keys;
}

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

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

 // 定时1s执行数据更新函数
  setInterval(function () {
    async_echart_bar_horizontal(
      container,
      path_bar_horizontal + "bar_horizontal.json"
    );
  }, 1000);

4. 数据传输格式 - JSON 定义​​​​​​​

[
    {
        "name": "10:00",
        "value": 300
    },
    {
        "name": "10:01",
        "value": 301
    },
    {
        "name": "10:02",
        "value": 301
    },
    {
        "name": "10:03",
        "value": 300
    },
    {
        "name": "10:04",
        "value": 300
    },
    {
        "name": "10:05",
        "value": 303
    },
    {
        "name": "10:06",
        "value": 303
    },
    {
        "name": "10:07",
        "value": 303
    }
]

5. 后端 flask 服务器

from flask import Flask
app = Flask(__name__, static_folder="static", template_folder="template")
 
 
# 主程序在这里
if __name__ == "__main__":
 
    # 开启线程,触发动态数据
    a = threading.Thread(target=asyncJson.loop)
    a.start()
 
    # 开启 flask 服务
    app.run(host='0.0.0.0', port=88, debug=True)

四. 启动命令

<!-- 启动server命令 -->
python main.py 
 
<!-- 浏览器中输入网址查看大屏(端口为 main.py 中的 port 参数定义) -->
http://localhost:88/static/index.html

​​​​​​​五. 运行效果

全球Python编程中文开发者的圈子,提供Python编程技术文章知识分享、技术专栏、原创视频教程、题库,内...

10 声望
1 粉丝
0 条评论
推荐阅读
终结 Python 原生字典?这个库要逆天改命了
字典是 Python 中基础的数据结构之一,字典的使用,可以说是非常的简单粗暴,但即便是这样一个与世无争的数据结构,仍然有很多人 "看不惯它" 。

Python编程学习圈阅读 267

封面图
Ubuntu20.04 从源代码编译安装 python3.10
Ubuntu 22.04 Release DateUbuntu 22.04 Jammy Jellyfish is scheduled for release on April 21, 2022If you’re ready to use Ubuntu 22.04 Jammy Jellyfish, you can either upgrade your current Ubuntu syste...

ponponon1阅读 3.9k

日常Python 代码片段整理
1、简单的 HTTP Web 服务器 {代码...} 2、单行循环List {代码...} 3、更新字典 {代码...} 4、拆分多行字符串 {代码...} 5、跟踪列表中元素的频率 {代码...} 6、不使用 Pandas 读取 CSV 文件 {代码...} 7、将列表...

墨城2阅读 291

Unicode 正则表达式(qbit)
前言本文根据《精通正则表达式》和 Unicode Regular Expressions 整理。本文的示例默认以 Python3 为实现语言,用到 Python3 的 re 模块或 regex 库。基本的 Unicode 属性分类 {代码...} 基本的 Unicode 子属性Le...

qbit阅读 4.3k

Python + Sqlalchemy 对数据库的批量插入或更新(Upsert)
由于不同数据库对这种 upsert 的实现机制不同,Sqlalchemy 也就不再试图做一致性的封装了,而是提供了各自的方言 API,具体到 Mysql,就是给 insert statement ,增加了 on_duplicate_key_update 方法。

songofhawk1阅读 1.9k评论 4

封面图
Go for 循环有时候真的很坑。。。
大家好,我是煎鱼。不知道有多少 Go 的面试题和泄露,都和 for 循环有关。今天我在周末认真一看,发现了 redefining for loop variable semantics 。著名的硬核大佬 Russ Cox 表示他一直在研究这个问题,并表示十...

煎鱼阅读 3.4k

打脸了兄弟们,Go1.20 arena 来了!
大家好,我是煎鱼。大概半年前,我写过一篇文章《Go 要违背初心吗?新提案:手动管理内存》。有兴趣了深入解的同学,可以再回顾一下。当时我们还想着 Go 团队应该不会接纳,至少不会那么快:懒得翻也可以看我再次...

煎鱼阅读 3.2k

全球Python编程中文开发者的圈子,提供Python编程技术文章知识分享、技术专栏、原创视频教程、题库,内...

10 声望
1 粉丝
宣传栏