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

更新時間：2022年01月16日 11:26:24 作者：DECHIN

本文通過一個實際的散點圖案例，展示了如何使用pyqt5嵌套一個pyecharts圖層的方法，通過這個技巧，可以在pyqt5的框架中也實現(xiàn)精美的數(shù)據(jù)可視化的功能模塊，感興趣的朋友一起看看吧

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

技術(shù)背景

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

環(huán)境依賴

這里主要依賴于pyecharts和pyqt5這兩個庫，但是由于pyqt5在5.10.1版本前后經(jīng)歷了比較大的變革，建議是安裝最新版本的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: chenjiandongx@qq.com
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: info@riverbankcomputing.com
License: GPL v3
Location: /home/dechin/miniconda3/lib/python3.9/site-packages
Requires: PyQt5-Qt5, PyQt5-sip
Required-by: PyQtWebEngine

部分代碼解析

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

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來生成一系列的隨機數(shù)，然后排序后再進行繪圖，繪圖時采用的pyecharts的Scatter形式散點圖。在pyecharts中配置散點圖的參數(shù)時，主要方法是調(diào)用Scatter中的函數(shù)來進行構(gòu)造，比如我們常用的一些窗口工具，區(qū)域縮放等功能，就可以在Scatter中添加一個toolbox來實現(xiàn)：

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中主要實現(xiàn)了網(wǎng)頁另存為圖像的功能、區(qū)域縮放的功能，以及返回操作的功能。在通過pyecharts構(gòu)造了圖層之后，需要通過：

render("/tmp/scatter.html")

的方法將生成的效果圖保存成一個本地的html文件。最后通過pyqt中的圖層中導入網(wǎng)頁，實現(xiàn)圖像的展示效果：

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_())

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