【1+TLZ】数据可视化:基于 Pyecharts + PyQT 实现的动态实时拖拉拽大屏 - 互联网企业数据分析

目录

 

精彩案例汇总

效果展示

1、首先看动态效果图 

2、实时分片数据图 - 标准版面

3、实时分片数据图 - 将柱状图放大后的自适应版面

4、实时分片数据图 - 将地图放大后的自适应版面

一、 确定需求方案

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

2、功能模块

3、部署方式

二、整体架构设计

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

1、设计页面布局原型:使用QSplitter实现自适应拖拉拽功能 

2、实现加载Html功能:把QFrame换成QWebEngineView

3、美化界面,加上背景瞬间高端大气上档次

4、最后,完整布局代码

四、上线运行

五、源码下载

精彩案例汇总


写在前面,用程序猿的话来讲,好久没有发新版本了,今天就给大家演示Pyhon实现的 动态实时拖拉拽大屏 ,重点的事情说三遍:自定义拖拉拽,自定义拖拉拽,自定义拖拉拽!!!

近年来,数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【互联网企业数据分析】。

之前小伙伴们建议我出一些视频课程来学习Echarts,这样可以更快上手,所以我就追星赶月的录制了《Echarts - 0基础入门课程》Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院 ,希望小伙伴们多多支持。

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

话不多说,开始分享干货,欢迎讨论!微信: 6550523

效果展示

1、首先看动态效果图 

2、实时分片数据图 - 标准版面

标准版面
标准版面

3、实时分片数据图 - 将柱状图放大后的自适应版面

将三维柱状图放大后的自适应版面
将柱状图放大后的自适应版面

4、实时分片数据图 - 将地图放大后的自适应版面

将地图放大后的自适应版面
将地图放大后的自适应版面

一、 确定需求方案

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

1920px*1080px,F11全屏后占满整屏且无滚动条。其它分辨率也可自适应。

2、功能模块

包括:Pie-饼图,Liquid-数据精度,Line-面积图,Grid-降雨量,Geo-实时货物运输,Bar-产品销量,Bar3d-城市人口,其他echarts图表功能可举一反三实现

3、部署方式

基于免安装可执行程序:支持Windows、Linux、Mac等各种操作系统;将程序复制到服务器上即可,需要python3运行环境;

二、整体架构设计

  1. 前端基于Pyecharts开源库设计,使用PyQt实现窗口界面,使用Pycharm编辑器;

  2. 数据源类型:目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite等,还可以定制其它类型数据库

  3. 数据更新方式:采用前端页面定时拉取的方式,后端http server返回数据;
     

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

1、设计页面布局原型:使用QSplitter实现自适应拖拉拽功能 

共分为9个QSplitter,10个QFrame。

代码实现:

import sys
from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QVBoxLayout, QFrame,
                             QSplitter, QStyleFactory, QApplication)
from PyQt5.QtCore import Qt


class Example(QWidget):
    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):
        main_box = QHBoxLayout(self)

        frame1 = QFrame(self)
        frame1.setFrameShape(QFrame.StyledPanel)
        frame2 = QFrame(self)
        frame2.setFrameShape(QFrame.StyledPanel)
        frame3 = QFrame(self)
        frame3.setFrameShape(QFrame.StyledPanel)
        frame4 = QFrame(self)
        frame4.setFrameShape(QFrame.StyledPanel)
        frame5 = QFrame(self)
        frame5.setFrameShape(QFrame.StyledPanel)
        frame6 = QFrame(self)
        frame6.setFrameShape(QFrame.StyledPanel)
        frame7 = QFrame(self)
        frame7.setFrameShape(QFrame.StyledPanel)
        frame8 = QFrame(self)
        frame8.setFrameShape(QFrame.StyledPanel)
        frame9 = QFrame(self)
        frame9.setFrameShape(QFrame.StyledPanel)
        frame10 = QFrame(self)
        frame10.setFrameShape(QFrame.StyledPanel)

        splitter1 = QSplitter(Qt.Vertical)
        splitter2 = QSplitter(Qt.Horizontal)
        splitter3 = QSplitter(Qt.Horizontal)
        splitter4 = QSplitter(Qt.Vertical)
        splitter5 = QSplitter(Qt.Horizontal)
        splitter6 = QSplitter(Qt.Vertical)
        splitter7 = QSplitter(Qt.Vertical)
        splitter8 = QSplitter(Qt.Vertical)
        splitter9 = QSplitter(Qt.Vertical)

        splitter1.addWidget(frame1)
        splitter1.addWidget(splitter2)
        splitter1.setSizes([1, 5])

        splitter2.addWidget(splitter6)
        splitter2.addWidget(splitter3)
        splitter2.setSizes([1, 3])

        splitter3.addWidget(splitter4)
        splitter3.addWidget(splitter8)
        splitter3.setSizes([2, 1])

        splitter4.addWidget(splitter5)
        splitter4.addWidget(frame2)
        splitter4.setSizes([1, 3])

        splitter5.addWidget(frame3)
        splitter5.addWidget(frame4)

        splitter6.addWidget(frame5)
        splitter6.addWidget(splitter7)
        splitter6.setSizes([1, 2])

        splitter7.addWidget(frame6)
        splitter7.addWidget(frame7)

        splitter8.addWidget(frame8)
        splitter8.addWidget(splitter9)
        splitter8.setSizes([1, 2])

        splitter9.addWidget(frame9)
        splitter9.addWidget(frame10)

        main_box.addWidget(splitter1)
        self.setLayout(main_box)
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('QSplitter')
        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

2、实现加载Html功能:把QFrame换成QWebEngineView

import sys
from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QSplitter, QApplication)
from PyQt5.QtCore import (Qt, QUrl)
from PyQt5.QtWebEngineWidgets import *


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):
        main_box = QHBoxLayout(self)

        self.browser1 = QWebEngineView()
        self.browser1.load(QUrl('http://www.baidu.com'))
        self.browser2 = QWebEngineView()
        self.browser2.load(QUrl('http://www.baidu.com'))
        self.browser3 = QWebEngineView()
        self.browser3.load(QUrl('http://www.baidu.com'))
        self.browser4 = QWebEngineView()
        self.browser4.load(QUrl('http://www.baidu.com'))
        self.browser5 = QWebEngineView()
        self.browser5.load(QUrl('http://www.baidu.com'))
        self.browser6 = QWebEngineView()
        self.browser6.load(QUrl('http://www.baidu.com'))
        self.browser7 = QWebEngineView()
        self.browser7.load(QUrl('http://www.baidu.com'))
        self.browser8 = QWebEngineView()
        self.browser8.load(QUrl('http://www.baidu.com'))
        self.browser9 = QWebEngineView()
        self.browser9.load(QUrl('http://www.baidu.com'))
        self.browser10 = QWebEngineView()
        self.browser10.load(QUrl('http://www.baidu.com'))

        splitter1 = QSplitter(Qt.Vertical)
        splitter2 = QSplitter(Qt.Horizontal)
        splitter3 = QSplitter(Qt.Horizontal)
        splitter4 = QSplitter(Qt.Vertical)
        splitter5 = QSplitter(Qt.Horizontal)
        splitter6 = QSplitter(Qt.Vertical)
        splitter7 = QSplitter(Qt.Vertical)
        splitter8 = QSplitter(Qt.Vertical)
        splitter9 = QSplitter(Qt.Vertical)

        splitter1.addWidget(self.browser1)
        splitter1.addWidget(splitter2)
        splitter1.setSizes([1, 5])

        splitter2.addWidget(splitter6)
        splitter2.addWidget(splitter3)
        splitter2.setSizes([1, 3])

        splitter3.addWidget(splitter4)
        splitter3.addWidget(splitter8)
        splitter3.setSizes([2, 1])

        splitter4.addWidget(splitter5)
        splitter4.addWidget(self.browser2)
        splitter4.setSizes([1, 3])

        splitter5.addWidget(self.browser3)
        splitter5.addWidget(self.browser4)

        splitter6.addWidget(self.browser5)
        splitter6.addWidget(splitter7)
        splitter6.setSizes([1, 2])

        splitter7.addWidget(self.browser6)
        splitter7.addWidget(self.browser7)

        splitter8.addWidget(self.browser8)
        splitter8.addWidget(splitter9)
        splitter8.setSizes([1, 2])

        splitter9.addWidget(self.browser9)
        splitter9.addWidget(self.browser10)

        main_box.addWidget(splitter1)
        self.setLayout(main_box)
        self.setGeometry(300, 300, 600, 500)
        self.setWindowTitle('QSplitter')
        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = MainWindow()
    sys.exit(app.exec_())

3、美化界面,加上背景瞬间高端大气上档次

    def setBackground(self):
        palette = QPalette()
        pix = QPixmap("./images/bg.jpg")
        pix = pix.scaled(self.width(), self.height())
        palette.setBrush(QPalette.Background, QBrush(pix))
        self.setPalette(palette)

4、最后,完整布局代码

import sys
from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QSplitter, QApplication)
from PyQt5.QtCore import (Qt, QUrl)
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEngineSettings
from PyQt5.QtGui import QPalette, QPixmap, QBrush, QColor
from render_html import *

#pip3 install PyQt5==5.15.2
#pip3 install pyecharts==1.9.0

#所有图表参考https://pyecharts.org/#/zh-cn/intro
#范例和展示效果https://gallery.pyecharts.org/#/README
#使用方法https://www.jianshu.com/p/554d64470ec9
#加载速度https://www.cnblogs.com/tomoya0307/p/12737117.html
#参考范例模板https://blog.csdn.net/lildkdkdkjf/article/details/106571356
class MainWindow(QWidget):
    render = RenderHtml()

    def __init__(self):
        super().__init__()
        self.initUI()
        self.setBackground()

    #设置背景图
    def setBackground(self):
        palette = QPalette()
        pix = QPixmap("./images/bg.jpg")
        pix = pix.scaled(self.width(), self.height(), Qt.IgnoreAspectRatio, Qt.SmoothTransformation)#自适应图片大小
        palette.setBrush(self.backgroundRole(), QBrush(pix))# 设置背景图片
        #palette.setColor(self.backgroundRole(), QColor(192, 253, 123))  # 设置背景颜色
        self.setPalette(palette)

    #画界面元素
    def initUI(self):
        main_box = QHBoxLayout(self)

        self.browser1 = QWebEngineView()
        self.browser1.page().setBackgroundColor(Qt.transparent)
        self.browser1.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.browser1.load(QUrl("file:///html/title.html"))

        self.browser2 = QWebEngineView()
        self.browser2.page().setBackgroundColor(Qt.transparent)
        self.browser2.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Geo_lines("html/geo_lines.html")
        self.browser2.load(QUrl("file:///html/geo_lines.html"))

        self.browser3 = QWebEngineView()
        self.browser3.page().setBackgroundColor(Qt.transparent)
        self.browser3.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Liquid_data_precision("html/liquid_data_precision.html")
        self.browser3.load(QUrl("file:///html/liquid_data_precision.html"))

        self.browser4 = QWebEngineView()
        self.browser4.page().setBackgroundColor(Qt.transparent)
        self.browser4.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Liquid_without_outline("html/liquid_without_outline.html")
        self.browser4.load(QUrl("file:///html/liquid_without_outline.html"))

        self.browser5 = QWebEngineView()
        self.browser5.page().setBackgroundColor(Qt.transparent)
        self.browser5.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Gauge("html/gauge.html")
        self.browser5.load(QUrl("file:///html/gauge.html"))

        self.browser6 = QWebEngineView()
        self.browser6.page().setBackgroundColor(Qt.transparent)
        self.browser6.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Stack_bar_percent("html/stack_bar_percent.html")
        self.browser6.load(QUrl("file:///html/stack_bar_percent.html"))

        self.browser7 = QWebEngineView()
        self.browser7.page().setBackgroundColor(Qt.transparent)
        self.browser7.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Bar3d_punch_card("html/bar3d_punch_card.html")
        self.browser7.load(QUrl("file:///html/bar3d_punch_card.html"))

        self.browser8 = QWebEngineView()
        self.browser8.page().setBackgroundColor(Qt.transparent)
        self.browser8.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Grid_multi_yaxis("html/grid_multi_yaxis.html")
        self.browser8.load(QUrl("file:///html/grid_multi_yaxis.html"))

        self.browser9 = QWebEngineView()
        self.browser9.page().setBackgroundColor(Qt.transparent)
        self.browser9.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Line_areastyle_boundary_gap("html/line_areastyle_boundary_gap.html")
        self.browser9.load(QUrl("file:///html/line_areastyle_boundary_gap.html"))

        self.browser10 = QWebEngineView()
        self.browser10.page().setBackgroundColor(Qt.transparent)
        self.browser10.page().settings().setAttribute(QWebEngineSettings.ShowScrollBars, False)
        self.render.Pie_position("html/pie_position.html")
        self.browser10.load(QUrl("file:///html/pie_position.html"))

        splitter_width = 2
        splitter1 = QSplitter(Qt.Vertical)
        #splitter1.setStyleSheet("QSplitter::handle { background-color: white }")
        splitter1.setStyleSheet("QSplitter::handle { background-color: rgb(0,51,102) }")
        #splitter1.setStyleSheet("background-color: rgb(255,255,255);")
        splitter1.setHandleWidth(splitter_width)
        splitter2 = QSplitter(Qt.Horizontal)
        splitter2.setHandleWidth(splitter_width)
        splitter3 = QSplitter(Qt.Horizontal)
        splitter3.setHandleWidth(splitter_width)
        splitter4 = QSplitter(Qt.Vertical)
        splitter4.setHandleWidth(splitter_width)
        splitter5 = QSplitter(Qt.Horizontal)
        splitter5.setHandleWidth(splitter_width)
        splitter6 = QSplitter(Qt.Vertical)
        splitter6.setHandleWidth(splitter_width)
        splitter7 = QSplitter(Qt.Vertical)
        splitter7.setHandleWidth(splitter_width)
        splitter8 = QSplitter(Qt.Vertical)
        splitter8.setHandleWidth(splitter_width)
        splitter9 = QSplitter(Qt.Vertical)
        splitter9.setHandleWidth(splitter_width)

        splitter1.addWidget(self.browser1)
        splitter1.addWidget(splitter2)
        splitter1.setSizes([1, 13])

        splitter2.addWidget(splitter6)
        splitter2.addWidget(splitter3)
        splitter2.setSizes([1, 3])

        splitter3.addWidget(splitter4)
        splitter3.addWidget(splitter8)
        splitter3.setSizes([2, 1])

        splitter4.addWidget(splitter5)
        splitter4.addWidget(self.browser2)
        splitter4.setSizes([1, 3])

        splitter5.addWidget(self.browser3)
        splitter5.addWidget(self.browser4)

        splitter6.addWidget(self.browser5)
        splitter6.addWidget(splitter7)
        splitter6.setSizes([1, 2])

        splitter7.addWidget(self.browser6)
        splitter7.addWidget(self.browser7)

        splitter8.addWidget(self.browser8)
        splitter8.addWidget(splitter9)
        splitter8.setSizes([1, 2])

        splitter9.addWidget(self.browser9)
        splitter9.addWidget(self.browser10)

        main_box.addWidget(splitter1)
        self.setLayout(main_box)
        self.setGeometry(0, 0, 2000, 1000)
        self.setWindowTitle('大屏展示')
        self.show()

    def resizeEvent(self, event):
        print("resizeEvent")
        self.setBackground()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = MainWindow()
    sys.exit(app.exec_())

四、上线运行

五、源码下载

【源码】数据可视化:基于Pyecharts+PyQT实现的动态实时【拖拉拽】大屏范例1-互联网企业数据分析.zip_pyecharts数据大屏-管理软件文档类资源-CSDN下载

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

本次分享结束,欢迎讨论!QQ微信同号: 6550523

XC7Z035-2FFG900I是一款基于TLZ7xH-EasyEVM开发板设计的FPGA芯片。该开发板采用了沉金无铅工艺的4层板设计,为用户提供了快速评估XC7Z035-2FFG900I的整体性能的平台。同时,在FPGA系统中,为了实现基于JTAG总线的调试,需要将设置在一个FPGA芯片中的旁路控制器分别连接到每个FPGA芯片中,这增加了FPGA系统连线的复杂度。此外,XC7Z035-2FFG900I与其他子节点之间可以通过RDMA技术建立访问通道,实现节点之间的数据传输和更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Xilinx Zynq-7000 SoC高性能处理器,集成PS端双核ARM Cortex-A9 + PL端Kintex-7架构可编程逻辑资源,PS端...](https://blog.csdn.net/Tronlong_/article/details/102484543)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [上海XC7K325T-2FFG900I508所指定合供方(雅创芯城)](https://blog.csdn.net/weixin_29382667/article/details/112810302)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YYDataV软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值