在pyqt5中展示pyecharts生成的圖像問題

Posted on by

本文通過一個實際的散點圖案例，展示瞭如何使用pyqt5嵌套一個pyecharts圖層的方法，通過這個技巧，可以在pyqt5的框架中也實現精美的數據可視化的功能模塊。

技術背景

雖然現在很少有人用python去做一些圖形化的界面，但是不得不說我們在日常大部分的軟件使用中都還是有可視化與交互這樣的需求的。因此pyqt5作為一個主流的python的GUI框架地位是非常重要的，也是一個非常重要的技能。而pyecharts是相當於echarts的python版本，可以比較方便的制作一些非常精美的可視化圖片，因為生成的一般是html格式的，所以對於平臺的可遷移性相對較好。這裡我們主要探索一下在pyqt5制作出來的界面中集成一個pyecharts生成的頁面，效果圖如下所示：

環境依賴

這裡主要依賴於pyecharts和pyqt5這兩個庫，但是由於pyqt5在5.10.1版本前後經歷瞭比較大的變革，建議是安裝最新版本的pyqt5，然後額外安裝一個QtWebEngineWidgets的組件（若運行如下程序沒有任何報錯的話就不需要裝）：

$ python3 -m pip show pyecharts
Name: pyecharts
Version: 1.9.1
Summary: Python options, make charting easier
Home-page: https://github.com/pyecharts/pyecharts
Author: chenjiandongx
Author-email: [email protected]
License: MIT
Location: /home/dechin/miniconda3/lib/python3.9/site-packages
Requires: jinja2, prettytable, simplejson
Required-by:
$ python3 -m pip show pyqt5
Name: PyQt5
Version: 5.15.6
Summary: Python bindings for the Qt cross platform application toolkit
Home-page: https://www.riverbankcomputing.com/software/pyqt/
Author: Riverbank Computing Limited
Author-email: [email protected]
License: GPL v3
Location: /home/dechin/miniconda3/lib/python3.9/site-packages
Requires: PyQt5-Qt5, PyQt5-sip
Required-by: PyQtWebEngine

部分代碼解析

這裡我們僅僅摘取一小部分的代碼進行解析，該示例也是從網上找的一個框架做的修改。首先是數據生成的模塊：

import numpy as np
nums = 200
data = np.random.random((nums,2))
data = np.sort(data)
x_data = data[:,0]
y_data = data[:,1]

這裡使用numpy來生成一系列的隨機數，然後排序後再進行繪圖，繪圖時采用的pyecharts的Scatter形式散點圖。在pyecharts中配置散點圖的參數時，主要方法是調用Scatter中的函數來進行構造，比如我們常用的一些窗口工具，區域縮放等功能，就可以在Scatter中添加一個toolbox來實現：

toolbox_opts=opts.ToolboxOpts(
                    is_show=True,
                    orient="horizontal",
                    feature=opts.ToolBoxFeatureOpts(
                        save_as_image=opts.ToolBoxFeatureSaveAsImageOpts(type_="jpeg", title="保存為jpeg", pixel_ratio=2),
                        restore=opts.ToolBoxFeatureRestoreOpts(),
                        data_zoom=opts.ToolBoxFeatureDataZoomOpts(
                            xaxis_index=[0],
                            yaxis_index=[0]
                        ),
                    )
                )

這個toolbox中主要實現瞭網頁另存為圖像的功能、區域縮放的功能，以及返回操作的功能。在通過pyecharts構造瞭圖層之後，需要通過：

render("/tmp/scatter.html")

的方法將生成的效果圖保存成一個本地的html文件。最後通過pyqt中的圖層中導入網頁，實現圖像的展示效果：

self.mainhboxLayout = QHBoxLayout(self)
self.frame = QFrame(self)
self.mainhboxLayout.addWidget(self.frame)
self.hboxLayout = QHBoxLayout(self.frame)
self.myHtml = QWebEngineView()
self.myHtml.load(QUrl("file:////tmp/scatter.html"))
self.hboxLayout.addWidget(self.myHtml)
self.setLayout(self.mainhboxLayout)

總體代碼與展示效果

總體可運行的代碼如下所示：

import pyecharts.options as opts
from pyecharts.charts import Scatter
from PyQt5.QtCore import QUrl
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QFrame
from PyQt5.QtWebEngineWidgets import QWebEngineView
import sys
import numpy as np
class Stacked(QWidget):
    def __init__(self):
        super(Stacked, self).__init__()
        self.initData()
        self.initUI()
        self.mainLayout()
    def initUI(self):
        self.setGeometry(400, 400, 800, 600)
        self.setWindowTitle(" ")
    def initData(self):
        nums = 200
        data = np.random.random((nums,2))
        data = np.sort(data)
        x_data = data[:,0]
        y_data = data[:,1]
        (
            Scatter(init_opts=opts.InitOpts(width="1600px", height="1000px"))
                .add_xaxis(xaxis_data=x_data)
                .add_yaxis(
                series_name="",
                y_axis=y_data,
                symbol_size=20,
                label_opts=opts.LabelOpts(is_show=False),
            )
                .set_series_opts()
                .set_global_opts(
                xaxis_opts=opts.AxisOpts(
                    type_="value", splitline_opts=opts.SplitLineOpts(is_show=True)
                ),
                yaxis_opts=opts.AxisOpts(
                    type_="value",
                    axistick_opts=opts.AxisTickOpts(is_show=True),
                    splitline_opts=opts.SplitLineOpts(is_show=True),
                ),
                tooltip_opts=opts.TooltipOpts(is_show=False),
                toolbox_opts=opts.ToolboxOpts(
                    is_show=True,
                    orient="horizontal",
                    feature=opts.ToolBoxFeatureOpts(
                        save_as_image=opts.ToolBoxFeatureSaveAsImageOpts(type_="jpeg", title="保存為jpeg", pixel_ratio=2),
                        restore=opts.ToolBoxFeatureRestoreOpts(),
                        data_zoom=opts.ToolBoxFeatureDataZoomOpts(
                            xaxis_index=[0],
                            yaxis_index=[0]
                        ),
                    )
                )
            )
                .render("/tmp/scatter.html")
        )
    def mainLayout(self):
        self.mainhboxLayout = QHBoxLayout(self)
        self.frame = QFrame(self)
        self.mainhboxLayout.addWidget(self.frame)
        self.hboxLayout = QHBoxLayout(self.frame)
        self.myHtml = QWebEngineView()
        # 打開本地html文件
        self.myHtml.load(QUrl("file:////tmp/scatter.html"))
        self.hboxLayout.addWidget(self.myHtml)
        self.setLayout(self.mainhboxLayout)
if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Stacked()
    ex.show()
    sys.exit(app.exec_())

打開界面效果如下圖所示：

通過點擊區域縮放的功能按鈕，可以在圖上選取一部分的區域進行更加細致的展示，並且具有單步返回和一步復原的功能按鈕。選取一部分之後的展示效果如下圖所示：

總結概要

本文通過一個實際的散點圖案例，展示瞭如何使用pyqt5嵌套一個pyecharts圖層的方法，通過這個技巧，可以在pyqt5的框架中也實現精美的數據可視化的功能模塊。

版權聲明

本文首發鏈接為：https://www.cnblogs.com/dechinphy/p/pyqtecharts.html

作者ID：DechinPhy

更多原著文章請參考：https://www.cnblogs.com/dechinphy/

打賞專用鏈接：https://www.cnblogs.com/dechinphy/gallery/image/379634.html

騰訊雲專欄同步：https://cloud.tencent.com/developer/column/91958

參考鏈接https://blog.csdn.net/weixin_38416696/article/details/94003119 “留一手”加劇內卷，“講不清”浪費時間。

到此這篇關於在pyqt5中展示pyecharts生成的圖像的文章就介紹到這瞭,更多相關pyqt5展示pyecharts生成的圖像內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：