【PyQt5】Python在PyQt5中使用ECharts绘制图表_pyqt5 pyecharts

作者：菜鸟追梦旅行 | 2024-05-15 00:35:20

踩

pyqt5 pyecharts

能搜到这篇文章的想必对PyQt5和ECharts都有所了解，我也就不多赘述了。
先看看我们要做什么

用PyQt5写一个界面；
用HTML写一个ECharts图标，下文以雷达图为例；
将图标嵌入界面；
调用JavaScript方法改变图标的值。

PyQt5界面

随便添加一个Layout就行
PyQt5布局

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

嵌入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)
1
2
3
4
5
6
7
8

这样就可以在Layout里显示刚才那张雷达图了。

调用JS方法

比如例子中的方法：修改雷达图的值，像这样写即可顺利调用。

js = "setValue({0})".format(values)
radar_view.page().runJavaScript(js)
1
2

如果报错方法未找到，参考Python使用QWebEngineView时报错Uncaught ReferenceError的解决。

对比pyecharts

使用pyecharts时会先生成一个HTML文件，再嵌入PyQt5的UI，而且图标的丰富与实用程度远不及原本的ECharts。
但是像pyecharts生成一个文件再加载也有其好处，可以参考Python根据模板生成HTML文件并加载进QWebEngineView。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】