当前位置: 首页 > news >正文

基于 Echarts + Python Flask 动态实时大屏( 附代码)

目录

    • 一、确定需求方案
    • 二、整体架构设计
    • 三、编码实现 (关键代码)
    • 四、完整代码
  • 五、运行效果

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

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

3a16d4493655406d95d79cdcd2e85b86.gif

2.静态切片效果图

24c1d654b6b649c2bb00b5844c902caf.png

一、确定需求方案

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

部署方式

基于免安装可执行程序:支持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接口方式。
    1. **数据更新方式:**采用http get 轮询方式 。在实际应用中,也可以视情况选择j监测后端数据实时更新,实时推送到前端的方式;

三、编码实现 (关键代码)

后端 Python Flask 代码

# -*- coding:utf-8 -*-

import io
import os
import sys
import time
import urllib
import random
import json
from flask import Flask, redirect
# 导入线程模块
import threading

app = Flask(__name__, static_folder="static", template_folder="template")


@app.route('/')
def index():
    return redirect('/static/index.html')


@app.route('/get_snap')
def get_snap():
    jsonData = {}
    jsonData['today_snap'] = random.randint(1, 100)
    jsonData['total_snap'] = random.randint(1, 1000)
    return json.dumps(jsonData)

@app.route('/qsjkdw')
def qsjkdw():
    jsonData = []
    for x in range(9):
        jsonData.append({"value": str(random.randint(1, 100))})
    return json.dumps(jsonData)

@app.route('/get_yjxxtj')
def get_yjxxtj():
    jsonData = []
    for x in range(6):
        jsonData.append(random.randint(1, 100))
    return json.dumps(jsonData)


def loop():
    time.sleep(10)
    pass

# 主程序在这里
if __name__ == "__main__":
    # 开启线程,触发动态数据
    a = threading.Thread(target=loop)
    a.start()

    # 开启 flask 服务
    app.run(host='127.0.0.1', port=80, debug=True)

四、完整代码

按照如下方式获取

目前开通了技术交流群,群友已超过3000人,添加时最好的备注方式为:来源+兴趣方向,方便找到更快获取资料、入群
方式①、添加微信号:dkl88191,备注:来自CSDN+大屏
方式②、微信搜索公众号:Python学习与数据挖掘,后台回复:大屏

五、运行效果

38f1b7e12d134fbda65ea7b3922ff8e6.gif

相关文章:

  • 并查集原理及模拟实现
  • 【Redis】大key的处理
  • T-3.2-把Redis当作消息队列合不合适
  • 简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW个人网站制作成品 web网页制作与实现
  • java基于springboot+element的实现医院预约挂号系统 nodejs
  • 在vue项目中使用canvas实现甘特图
  • 【C++】之模板进阶
  • 100天精通Python(数据分析篇)——第58天:Pandas读写数据库(read_sql、to_sql)
  • Bean的生命周期
  • 哈希桶(详解创建)
  • 回归预测 | MATLAB实现SSA-BP多输入单输出回归预测
  • 【雅思备考】听说读写攻略 | 雅思核心词汇之科技类
  • Python-列表,从基础到进阶用法大总结,进来查漏补缺
  • JDBC模拟SQL注入和避免SQL注入
  • flink在企业IT架构中如何定位-在选型流批一体技术与大数据架构时的避坑指南
  • [译]前端离线指南(上)
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • ES6--对象的扩展
  • Java 多线程编程之:notify 和 wait 用法
  • Java教程_软件开发基础
  • java中的hashCode
  • js作用域和this的理解
  • Redis字符串类型内部编码剖析
  • Spring框架之我见(三)——IOC、AOP
  • 测试开发系类之接口自动化测试
  • 大型网站性能监测、分析与优化常见问题QA
  • 聚簇索引和非聚簇索引
  • 马上搞懂 GeoJSON
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 一个SAP顾问在美国的这些年
  • 一个完整Java Web项目背后的密码
  • 智能网联汽车信息安全
  • LIGO、Virgo第三轮探测告捷,同时探测到一对黑洞合并产生的引力波事件 ...
  • 如何正确理解,内页权重高于首页?
  • 支付宝花15年解决的这个问题,顶得上做出十个支付宝 ...
  • (06)Hive——正则表达式
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (二)c52学习之旅-简单了解单片机
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (六)vue-router+UI组件库
  • (一)Linux+Windows下安装ffmpeg
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转)编辑寄语:因为爱心,所以美丽
  • (转)我也是一只IT小小鸟
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • .Net CoreRabbitMQ消息存储可靠机制
  • .NET MVC第五章、模型绑定获取表单数据
  • .net(C#)中String.Format如何使用
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .net分布式压力测试工具(Beetle.DT)
  • .NET序列化 serializable,反序列化
  • .Net转前端开发-启航篇,如何定制博客园主题
  • /dev下添加设备节点的方法步骤(通过device_create)