技术背景

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

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

通过点击区域缩放的功能按钮，可以在图上选取一部分的区域进行更加细致的展示，并且具有单步返回和一步复原的功能按钮。选取一部分之后的展示效果如下图所示：

总结概要

本文通过一个实际的散点图案例，展示了如何使用pyqt5嵌套一个pyecharts图层的方法，通过这个技巧，可以在pyqt5的框架中也实现精美的数据可视化的功能模块。

版权声明

版权声明
本文首发链接为：

作者ID：DechinPhy

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

打赏专用链接：

腾讯云专栏同步：https://cloud.tencent.com/developer/column/91958

参考链接

1. https://blog.csdn.net/weixin_38416696/article/details/94003119