【1+TLZ】数据可视化：基于 Pyecharts + PyQT 实现的动态实时拖拉拽大屏 - 互联网企业数据分析_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