能搜到這篇文章的想必對PyQt5和ECharts都有所了解，我也就不多贅述了。
先看看我們要做什么
- 用PyQt5寫一個界面；
- 用HTML寫一個ECharts圖標，下文以雷達圖為例；
- 將圖標嵌入界面；
- 調用JavaScript方法改變圖標的值。
PyQt5界面
隨便添加一個Layout就行
HTML代碼
就一個簡單的HTML模板，主題內容就是如何在HTML里使用ECharts，寫完之后可以打開這個文件看看能不能順利顯示。具體的圖表option查看ECharts即可。
例如radar.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="echarts.js"></script>
<title>Radar</title>
<style type="text/css">
body {margin: 0; padding: 0; overflow: hidden}
#main {height: 100%; width: 100%; position: absolute}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
let myChart = echarts.init(document.getElementById("main"))
let option = {
radar: {
shape: 'circle',
indicator: [
{ name: 'A', max: 100},
{ name: 'B', max: 100},
{ name: 'C', max: 100},
{ name: 'D', max: 100}
]
},
series: [{
type: 'radar',
data: [
{
value: [0, 0, 0, 0],
areaColor: "rgba(151,181,215,0.6)",
areaStyle: "color",
label: {
show: true,
formatter: function (params) {
// 可自定義顯示內容
return params.value
}
}
}
]
}]
};
myChart.setOption(option)
window.onresize = myChart.resize
// 修改雷達圖的值
function setValue(vals) {
option.series[0].data[0].value = vals
myChart.setOption(option)
}
</script>
</body>
</html>
嵌入PyQt5
由於嵌入的是Web頁面，所以需要新的相關依賴：PyQtWebEngine
直接pip安裝：pip install PyQtWebEngine
並導入：from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEngineSettings
嵌入的過程就是新建一個WebView添加到Layout，如：
radar_view = QWebEngineView()
web_settings = QWebEngineSettings.globalSettings()
web_settings.setAttribute(QWebEngineSettings.JavascriptEnabled, True)
web_settings.setAttribute(QWebEngineSettings.PluginsEnabled, True)
web_settings.setAttribute(QWebEngineSettings.JavascriptCanOpenWindows, True)
radar_view.load(QUrl("file:///radar.html")) # 注意格式，絕對路徑
radar_layout.addWidget(radar_view)
這樣就可以在Layout里顯示剛才那張雷達圖了。
調用JS方法
比如例子中的方法：修改雷達圖的值，像這樣寫即可順利調用。
js = "setValue({0})".format(values)
radar_view.page().runJavaScript(js)
如果報錯方法未找到，參考Python使用QWebEngineView時報錯Uncaught ReferenceError的解決。
對比pyecharts
使用pyecharts時會先生成一個HTML文件，再嵌入PyQt5的UI，而且圖標的豐富與實用程度遠不及原本的ECharts。
但是像pyecharts生成一個文件再加載也有其好處，可以參考Python根據模板生成HTML文件並加載進QWebEngineView。