技术背景

虽然现在很少有人用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: 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

部分代码解析

这里我们仅仅摘取一小部分的代码进行解析，该示例也是从网上找的一个框架做的修改。首先是数据生成的模块：

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

打开界面效果如下图所示：