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

盛夏光年ltk

已于 2022-02-15 14:35:28 修改

阅读量6.5k

点赞数 2

分类专栏： Python 文章标签： python pyqt5 echarts

于 2021-09-13 19:06:44 首次发布

本文链接：https://blog.csdn.net/xhltk316/article/details/120272972

版权

Python 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文介绍了如何使用PyQt5创建界面，并通过HTML嵌入ECharts雷达图，实现动态值的JavaScript操控。重点在于展示如何将ECharts图表无缝整合到PyQt环境中，以及JavaScript与Python的交互过程。

摘要由CSDN通过智能技术生成

能搜到这篇文章的想必对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>

嵌入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。

盛夏光年ltk

关注

2
点赞
踩
35

收藏

觉得还不错? 一键收藏
9
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录