如何在pyqt5中展示pyecharts生成的图像

魁首哥

作者

如何在pyqt5中展示pyecharts生成的图像

这期内容当中小编将会给大家带来有关如何在pyqt5中展示pyecharts生成的图像，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

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

技术背景

虽然现在很少有人用python去做一些图形化的界面，但是不得不说我们在日常大部分的软件使用中都还是有可视化与交互这样的需求的。因此pyqt5作为一个主流的python的GUI框架地位是非常重要的，也是一个非常重要的技能。而pyecharts是相当于echarts的python版本，可以比较方便的制作一些非常精美的可视化图片，因为生成的一般是html格式的，所以对于平台的可迁移性相对较好。这里我们主要探索一下在pyqt5制作出来的界面中集成一个pyecharts生成的页面，效果图如下所示：

环境依赖

这里主要依赖于pyecharts和pyqt5这两个库，但是由于pyqt5在5.10.1版本前后经历了比较大的变革，建议是安装最新版本的pyqt5，然后额外安装一个QtWebEngineWidgets的组件（若运行如下程序没有任何报错的话就不需要装）：

$python3-mpipshowpyechartsName:pyechartsVersion:1.9.1Summary:Pythonoptions,makechartingeasierHome-page:https://github.com/pyecharts/pyechartsAuthor:chenjiandongxAuthor-email:chenjiandongx@qq.comLicense:MITLocation:/home/dechin/miniconda3/lib/python3.9/site-packagesRequires:jinja2,prettytable,simplejsonRequired-by:$python3-mpipshowpyqt5Name:PyQt5Version:5.15.6Summary:PythonbindingsfortheQtcrossplatformapplicationtoolkitHome-page:https://www.riverbankcomputing.com/software/pyqt/Author:RiverbankComputingLimitedAuthor-email:info@riverbankcomputing.comLicense:GPLv3Location:/home/dechin/miniconda3/lib/python3.9/site-packagesRequires:PyQt5-Qt5,PyQt5-sipRequired-by:PyQtWebEngine

部分代码解析

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

importnumpyasnpnums=200data=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)

总体代码与展示效果

总体可运行的代码如下所示：

importpyecharts.optionsasoptsfrompyecharts.chartsimportScatterfromPyQt5.QtCoreimportQUrlfromPyQt5.QtWidgetsimportQApplication,QWidget,QHBoxLayout,QFramefromPyQt5.QtWebEngineWidgetsimportQWebEngineViewimportsysimportnumpyasnpclassStacked(QWidget):def__init__(self):super(Stacked,self).__init__()self.initData()self.initUI()self.mainLayout()definitUI(self):self.setGeometry(400,400,800,600)self.setWindowTitle("")definitData(self):nums=200data=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"))defmainLayout(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_())

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