<h1>数据可视化：基于<strong> <span style="color:#3399ea;">Pyecharts</span> </strong>+<strong> <span style="color:#3399ea;">PyQT</span></strong><span style="color:#3399ea;"> </span>实现的 <span style="color:#86ca5e;">动态 </span><span style="color:#ffbb66;">实时 </span><strong><span style="color:#3399ea;">拖拉拽 </span></strong>大屏范例一</h1>
<p>写在前面，用程序猿的话来讲，好久没有发新版本了，今天就给大家演示<span style="color:#3399ea;"><strong>Pyhon</strong></span>实现的<span style="color:#3399ea;"><strong> 动态实时拖拉拽大屏 </strong></span>！！！</p>
<p>近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【互联网企业数据分析】。</p>
<p>话不多说，开始分享干货，欢迎讨论！<strong><span style="color:#3399ea;">微信： 6550523</span></strong></p>
<p> </p>
<h3>首先看动态效果图 ：</h3>
<div class="csdn-video-box">
<iframe allowfullscreen="true" data-mediaembed="youku" id="4twUwufR-1616665717313" src="https://player.youku.com/embed/XNTEyNTEyODgyOA=="></iframe>
<p>基于 Pyecharts + PyQT 实现的动态实时拖拉拽大屏范例一</p>
</div>
<h3>实时分片数据图 - <span style="color:#3399ea;"><strong>标准版面</strong></span>：</h3>
<div style="text-align:center;">
<figure class="image">
<img alt="标准版面" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-d47309b0d75c777eea84049fca655ed0.png">
<figcaption>
<strong>标准版面</strong>
</figcaption>
</figure>
</div>
<h3>实时分片数据图 -<span style="color:#3399ea;"> 将柱状图放大后的自适应版面</span>：</h3>
<div style="text-align:center;">
<figure class="image">
<img alt="将三维柱状图放大后的自适应版面" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e810d69a07998d723c568477df71f1d2.png">
<figcaption>
将柱状图放大后的自适应版面
</figcaption>
</figure>
</div>
<h3>实时分片数据图 -<span style="color:#3399ea;"> 将地图放大后的自适应版面</span>：</h3>
<div style="text-align:center;">
<figure class="image">
<img alt="将地图放大后的自适应版面" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a8395dffade7d46996fda94d5d0bb9fb.png">
<figcaption>
将地图放大后的自适应版面
</figcaption>
</figure>
</div>
<h3>一、 确定需求方案</h3>
<p><strong>1、确定产品上线部署的屏幕LED分辨率</strong></p>
<p>1920px*1080px，F11全屏后占满整屏且无滚动条。其它分辨率也可自适应。</p>
<p><strong>2、功能模块</strong></p>
<p>包括：<span style="color:#3399ea;">Pie</span>-饼图，<span style="color:#3399ea;">Liquid</span>-数据精度，<span style="color:#3399ea;">Line</span>-面积图，<span style="color:#3399ea;">Grid</span>-降雨量，<span style="color:#3399ea;">Geo</span>-实时货物运输，<span style="color:#3399ea;">Bar</span>-产品销量，<span style="color:#3399ea;">Bar3d</span>-城市人口，其他<span style="color:#3399ea;">echarts图表功能可举一反三实现</span>。</p>
<p><strong>3、部署方式</strong></p>
<p>基于<strong>免安装可执行程序</strong>：支持<strong>Windows、Linux、Mac等各种操作系统</strong>；将程序复制到服务器上即可，需要python3运行环境；</p>
<h2>二、整体架构设计</h2>
<ol><li> <p>前端基于<strong>Pyecharts</strong>开源库设计，使用<strong>PyQt</strong>实现窗口界面，使用<strong>Pycharm</strong>编辑器；</p> </li><li> <p>数据源类型：目前已支持<strong>PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite</strong>等，还可以定制<strong>其它类型数据库</strong>。</p> </li><li> <p>数据更新方式：采用前端页面定时拉取的方式，后端http server返回数据；<br> </p> </li></ol>
<h2>三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）</h2>
<h3>1，设计页面布局原型：使用<span style="color:#86ca5e;">QSplitter</span>实现自适应<span style="color:#86ca5e;"><strong>拖拉拽功能 </strong></span></h3>
<p><img alt="" height="437" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a0a735cf50d64cbc803db4cbce69772f.png" width="572"></p>
<p>共分为9个QSplitter，10个QFrame。</p>
<p>代码实现：</p>
<pre class="blockcode"><code class="language-python">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) |
|
转播
