目录
三、编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码)
1、设计页面布局原型:使用QSplitter实现自适应拖拉拽功能
2、实现加载Html功能:把QFrame换成QWebEngineView
写在前面,用程序猿的话来讲,好久没有发新版本了,今天就给大家演示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运行环境;
二、整体架构设计
-
前端基于Pyecharts开源库设计,使用PyQt实现窗口界面,使用Pycharm编辑器;
-
数据源类型:目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite等,还可以定制其它类型数据库。
-
数据更新方式:采用前端页面定时拉取的方式,后端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