能搜到这篇文章的想必对PyQt5和ECharts都有所了解,我也就不多赘述了。
先看看我们要做什么
就一个简单的HTML模板,主题内容就是如何在HTML里使用ECharts,写完之后可以打开这个文件看看能不能顺利显示。具体的图表option查看ECharts即可。
例如radar.html:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="echarts.js">script>
<title>Radartitle>
<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>
由于嵌入的是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 = "setValue({0})".format(values)
radar_view.page().runJavaScript(js)
如果报错方法未找到,参考Python使用QWebEngineView时报错Uncaught ReferenceError的解决。
使用pyecharts时会先生成一个HTML文件,再嵌入PyQt5的UI,而且图标的丰富与实用程度远不及原本的ECharts。
但是像pyecharts生成一个文件再加载也有其好处,可以参考Python根据模板生成HTML文件并加载进QWebEngineView。