PyQt与echarts的简单结合

llc的足迹

已于 2022-06-09 16:56:14 修改

阅读量1.3w

点赞数 25

分类专栏： PyQt5 文章标签： pyqt5 pyecharts echarts

于 2019-01-29 14:13:42 首次发布

本文链接：https://blog.csdn.net/this_is_id/article/details/86688585

版权

PyQt5 专栏收录该内容

16 篇文章 12 订阅

订阅专栏

安装

2022年5月16日版本升级
~~pip install pyecharts==0.5.1~~

pip install pyecharts==1.9.1
pip install -U PyQtWebEngine==5.15.1

初始化界面

自定义模板

其中引入了echarts.min.js

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Echarts</title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!--2022年5月16日版本升级-->
<!--<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</body>
</html>

使用QWebEngineView加载本地html

loadFinished信号确保html加载完成后渲染画布

url = QUrl("file:///template.html")
self.view.load(url)
self.view.loadFinished.connect(self.set_options)

图表渲染

self.echarts确保首次加载时才初始化echarts，这里用到了runJavaScript方法，可以直接执行js代码；self.get_options得到myChart用的options(详细说明)，这里直接用pyecharts生成，见self.create_pie，其它类型图表参照此方法即可；

def set_options(self):
    if not self.view:
        return
    if not self.echarts:
        # 初始化echarts
        self.view.page().runJavaScript(
            '''
                var myChart = echarts.init(document.getElementById('container'), 'light', {renderer: 'canvas'});
            '''
        )
        self.echarts = True
    options = self.get_options()
    if not options:
        return
    self.view.page().runJavaScript(
        f'''
            var option = eval({options});
            myChart.setOption(option);
        '''
    )

def get_options(self):
    v1, v2, v3, v4, v5, v6 = self.spinbox1.value(), self.spinbox2.value(), self.spinbox3.value(), self.spinbox4.value(), \
                             self.spinbox5.value(), self.spinbox6.value()
    v = [v1, v2, v3, v4, v5, v6]
    if self.combobox_type.currentIndex() == 0:
        # 饼图
        options = self.create_pie(v)
    elif self.combobox_type.currentIndex() == 1:
        # 柱状图
        options = self.create_bar(v)
    elif self.combobox_type.currentIndex() == 2:
        # 折线图
        options = self.create_line(v)
    elif self.combobox_type.currentIndex() == 3:
        # 折线、柱状图
        options = self.create_line_bar(v)
    else:
        return
    return options

def create_pie(self, v):
	pie = Pie()
	pie.add("商家", list(zip(ATTR, v)))
	pie.set_global_opts(title_opts=opts.TitleOpts(title=TITLE_TEXT, subtitle=TITLE_SUBTEXT))
	return pie.dump_options()

主题切换

def change_theme(self, theme):
    if not self.view:
        return
    options = self.get_options()
    if not options:
        return
    self.view.page().runJavaScript(
        f'''
            myChart.dispose();
            var myChart = echarts.init(document.getElementById('container'), '{theme}', {{renderer: 'canvas'}});
            myChart.clear();
            var option = eval({options});
            myChart.setOption(option);
        '''
    )