能搜到这篇文章的想必对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)
对比pyecharts
使用pyecharts时会先生成一个HTML文件，再嵌入PyQt5的UI，而且图标的丰富与实用程度远不及原本的ECharts。