文章来源：www.xdbcb8.com，转载请注明出处。上期我们画了一个大大的机器猫。本期我们来一起学习下在PyQt5中如何和Web页面进行交互的。这次的例子我们画一个好看的饼图，蹭一蹭数据可视化这个热点吧。
总体介绍
QWebEngineView类提供了一个用于查看和编辑Web文档的小部件。
Web视图是Qt WebEngine Web浏览模块的主要小部件组件。它可以在各种应用程序中用于从Internet实时显示Web内容。
可以使用load()函数将Web站点加载到Web视图。 GET方法始终用于加载URL。
与所有Qt小部件一样，必须调用show()函数才能显示Web视图。下面的代码段说明了这一点：
view = QWebEngineView(self)
view.load(QUrl("http://qt-project.org/"))
view.show()
或者，setUrl()可用于加载网站。如果您有可用的HTML内容，则可以使用setHtml()。
在视图开始加载时发出loadStarted()信号，并且只要Web视图的元素完成加载(例如嵌入的图像或脚本)，就会发出loadProgress()信号。完全加载视图时会发出loadFinished()信号。它的参数，是True还是Flase，表明加载是成功还是失败。
page()函数返回指向网页对象的指针。 QWebEngineView包含一个QWebEnginePage，它允许访问页面上下文中的QWebEngineHistory。
可以使用title()属性访问HTML文档的标题。此外，网站可以指定一个图标，可以使用属性iconUrl()URL或者使用icon()或其访问该图标。如果标题或图标发生变化，将发出相应的titleChanged()，iconChanged()和iconUrlChanged()信号。 zoomFactor()属性允许通过比例因子缩放网页的内容。
该小部件具有针对元素定制的上下文菜单，并包括在浏览器中有用的操作。对于自定义上下文菜单，或者在菜单或工具栏中嵌入操作，可以通过pageAction()获得各个操作。 Web视图维护返回操作的状态，但允许修改操作属性，如文本或图标。动作语义也可以通过triggerPageAction()直接触发。
如果要为允许用户打开新窗口的网站(如弹出窗口)提供支持，可以继承QWebEngineView并重新实现createWindow()函数。
下面我们演示一下通过QWebEngineView打开百度，简略的代码如下：
view = QWebEngineView(self)
view.load(QUrl("http://www.baidu.com/"))
view.show()
效果图如下：
我们再演示一个打开本地HTML，简略的代码如下：
view = QWebEngineView(self)
view.load(QUrl("C:/Users/Administrator/Desktop/paoku/index.html"))
view.show()
效果如下：
这里特别强调一下：QUrl里面的请放入绝对地址，不要放入类似：”./index.html”这种相对地址，即使是在同一目录下面。
可能你会说：我不，我就要用相对地址，怎么办？
这种情况的解决方式可以是这样的：
view = QWebEngineView(self)
url = QUrl(QFileInfo("./pie-simple.html").absoluteFilePath())
view.load(url)
返回包含文件名的绝对路径。
QUrl(QFileInfo("./pie-simple.html").absoluteFilePath())
绝对路径名由完整路径和文件名组成。 在Unix上，这将始终以root，’/‘目录开头。 在Windows上，这将始终以’D：/‘开头，其中D是驱动器号，但未映射到驱动器号的网络共享除外，在这种情况下，路径将以’// sharename /‘开头。 QFileInfo将大写驱动器号。
当然Python中也有类似的语言:
url = QUrl(os.path.abspath("./pie-simple.html"))
更多详细的内容，请参考官方文档：
类归属
PyQt5->QtWebEngine->QWebEngineView
继承关系
PyQt5->QObject and QPaintDevice->QWidget->QWebEngineView
小例子
出门在外，对自己要好点，无奈每个月这点工资收入。
我们单位是一个好单位！我们虽然下班晚，但是我们上班早啊！我们虽然休息少，但是我们值班多啊！我们虽然冬天冷，但是我们夏天热啊！我们虽然放假晚，但是我们开工早啊！我们虽然工资少，但是我们工作多啊！
在物价飞涨的时代，只有工资以不变应万变。
图片来自网络，版权属于原作者
好了，你每个月的工资是怎么花的呢，来统计统计吧！
上面的动画中左侧我们列举了月度常见开销，这个可以填入自己的实际开销。右边则是根据这些开销实现的饼状图，自动计算各项开支占比，看看你的钱去哪了。
自己填写开支不方便，我们还可以自动演示一下。
当我们点击自动演示的时候，每隔一秒会自动随机填写各项开支，右边的饼图自然随之变化了。
这个是怎么实现的呢？
在本次例子中我们需要用到ECharts这个东东。
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
ECharts在网页上显示图表我感觉比较惊艳，所以选择使用这个。
详细的介绍请百度。
部分核心代码讲解
def initUi(self):
self.view = QWebEngineView(self.widget)
with codecs.open("pie-simple.html", "r", "utf-8") as f:
html = f.read()
self.view.setHtml(html)
self.time = QTimer()
def showPi(self):
food = self.spinBox_food.value()
rent = self.spinBox_rent.value()
electricity = self.spinBox_electricity.value()
traffic = self.spinBox_traffic.value()
relationship = self.spinBox_relationship.value()
taobao = self.spinBox_taobao.value()
jscode = "showPiChart({}, {}, {}, {}, {}, {});".format(food, traffic, relationship, rent, electricity, taobao)
self.view.page().runJavaScript(jscode)
def autoShow(self):
self.spinBox_food.setValue(random.randint(100,10000))
self.spinBox_rent.setValue(random.randint(100,10000))
self.spinBox_electricity.setValue(random.randint(100,1000))
self.spinBox_traffic.setValue(random.randint(100,2000))
self.spinBox_relationship.setValue(random.randint(100,3000))
self.spinBox_taobao.setValue(random.randint(100,10000))
@pyqtSlot(bool)
def on_checkBox_toggled(self, flag):
if flag:
self.time.start(1000)
self.time.timeout.connect(self.autoShow)
else:
self.time.stop()
@pyqtSlot(int)
def on_spinBox_food_valueChanged(self, n):
self.showPi()
@pyqtSlot(int)
def on_spinBox_rent_valueChanged(self):
self.showPi()
@pyqtSlot(int)
def on_spinBox_electricity_valueChanged(self):
self.showPi()
@pyqtSlot(int)
def on_spinBox_traffic_valueChanged(self):
self.showPi()
@pyqtSlot(int)
def on_spinBox_relationship_valueChanged(self):
self.showPi()
@pyqtSlot(int)
def on_spinBox_taobao_valueChanged(self):
self.showPi()
def __del__(self):
self.view.deleteLater()
上面就是本次功能实现的一些核心代码，还有部分内容我感觉自己看就行了（包括pie-simple.html部分改写），就不讲解了。
关于QTimer的知识点，参考：
self.view = QWebEngineView(self.widget)
with codecs.open("pie-simple.html", "r", "utf-8") as f:
html = f.read()
self.view.setHtml(html)
新建QWebEngineView对象，同时打开pie-simple.html文件，并将HTMl内容在QWebEngineView对象中呈现。
def showPi(self):
food = self.spinBox_food.value()
rent = self.spinBox_rent.value()
electricity = self.spinBox_electricity.value()
traffic = self.spinBox_traffic.value()
relationship = self.spinBox_relationship.value()
taobao = self.spinBox_taobao.value()
jscode = "showPiChart({}, {}, {}, {}, {}, {});".format(food, traffic, relationship, rent, electricity, taobao)
self.view.page().runJavaScript(jscode)
food、rent、electricity、traffic、relationship、taobao分别表示伙食消费、房租租金、水电气、交通费用、人情往来、淘宝网购的费用。
function showPiChart(var0, var1, var2, var3, var4, var5){
if (option && typeof option === "object") {
option["series"][0]["data"][0]["value"] = var0;
option["series"][0]["data"][1]["value"] = var1;
option["series"][0]["data"][2]["value"] = var2;
option["series"][0]["data"][3]["value"] = var3;
option["series"][0]["data"][4]["value"] = var4;
option["series"][0]["data"][5]["value"] = var5;
myChart.setOption(option, true);
}
}
我们将取得的各项开支的值传递给showPiChart()，以便调用执行。
self.view.page().runJavaScript(jscode)
使用runJavaScript()去执行相应的JavaScript代码，重新生成我们新的饼形图。
def autoShow(self): self.spinBox_food.setValue(random.randint(100,10000)) self.spinBox_rent.setValue(random.randint(100,10000)) self.spinBox_electricity.setValue(random.randint(100,1000)) self.spinBox_traffic.setValue(random.randint(100,2000)) self.spinBox_relationship.setValue(random.randint(100,3000)) self.spinBox_taobao.setValue(random.randint(100,10000))
autoShow()旨在设置微调框的值，这个是QTimer对象超时时调用槽函数。
@pyqtSlot(bool) def on_checkBox_toggled(self, flag): if flag: self.time.start(1000) self.time.timeout.connect(self.autoShow) else: self.time.stop()
我们把自动演示勾上的时候，定时器启动，每隔1秒自动调用autoShow()。否则就取消定时器。
@pyqtSlot(int) def on_spinBox_food_valueChanged(self, n): self.showPi()
当微调框的数值发生变化的时候就会调用showPi()，这个就能理解为什么我们改变数值的时候饼形图会发生变化了。其他的类似。
def __del__(self): self.view.deleteLater()
为什么要加上这句呢？我们以前写的时候很少加上这句啊。因为在执行程序的时候，可能会出现关闭程序QWebEngineView崩溃的情况，加上这句就是让系统加快释放这部分内存，避免QWebEngineView崩溃的情况。
最后
好的，今天这期就这样结束吧。详细的代码大家自己下载看吧。如果说本篇可以看成是PyQt5向Web页面传递参数的文章，那么下期考虑写一个Web页面向PyQt5传递参数的文章，到时看情况吧。如果你喜欢本篇文章，请给我点赞
赞赏（推荐）
分享给你的好友们吧！
关注微信公众号：学点编程吧，发送：pyqt558可以获得本期代码。加油！(ง •̀_•́)ง (*•̀ㅂ•)و
