在pyqt5中展示pyecharts生成的圖像問(wèn)題

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

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

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

技術(shù)背景

雖然現(xiàn)在很少有人用python去做一些圖形化的界面，但是不得不說(shuō)我們?cè)谌粘４蟛糠值能浖褂弥卸歼€是有可視化與交互這樣的需求的。因此pyqt5作為一個(gè)主流的python的GUI框架地位是非常重要的，也是一個(gè)非常重要的技能。而pyecharts是相當(dāng)于echarts的python版本，可以比較方便的制作一些非常精美的可視化圖片，因?yàn)樯傻囊话闶莌tml格式的，所以對(duì)于平臺(tái)的可遷移性相對(duì)較好。這里我們主要探索一下在pyqt5制作出來(lái)的界面中集成一個(gè)pyecharts生成的頁(yè)面，效果圖如下所示：

環(huán)境依賴(lài)

這里主要依賴(lài)于pyecharts和pyqt5這兩個(gè)庫(kù)，但是由于pyqt5在5.10.1版本前后經(jīng)歷了比較大的變革，建議是安裝最新版本的pyqt5，然后額外安裝一個(gè)QtWebEngineWidgets的組件（若運(yùn)行如下程序沒(méi)有任何報(bào)錯(cuò)的話就不需要裝）：

$ 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

部分代碼解析

這里我們僅僅摘取一小部分的代碼進(jìn)行解析，該示例也是從網(wǎng)上找的一個(gè)框架做的修改。首先是數(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來(lái)生成一系列的隨機(jī)數(shù)，然后排序后再進(jìn)行繪圖，繪圖時(shí)采用的pyecharts的Scatter形式散點(diǎn)圖。在pyecharts中配置散點(diǎn)圖的參數(shù)時(shí)，主要方法是調(diào)用Scatter中的函數(shù)來(lái)進(jìn)行構(gòu)造，比如我們常用的一些窗口工具，區(qū)域縮放等功能，就可以在Scatter中添加一個(gè)toolbox來(lái)實(shí)現(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]
                        ),
                    )
                )

這個(gè)toolbox中主要實(shí)現(xiàn)了網(wǎng)頁(yè)另存為圖像的功能、區(qū)域縮放的功能，以及返回操作的功能。在通過(guò)pyecharts構(gòu)造了圖層之后，需要通過(guò)：

render("/tmp/scatter.html")

的方法將生成的效果圖保存成一個(gè)本地的html文件。最后通過(guò)pyqt中的圖層中導(dǎo)入網(wǎng)頁(yè)，實(shí)現(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)

總體代碼與展示效果

總體可運(yùn)行的代碼如下所示：

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()
        # 打開(kāi)本地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_())

打開(kāi)界面效果如下圖所示：