pyqt5使用echarts做数据可视化，可用pyinstaller打包_pyqt echarts

Echarts简介

ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具。目前，非常美观，非常好用，非常受欢迎的数据可视化工具。
官方网址：https://echarts.apache.org/zh/index.html

后来，有大神开发了Pyecharts， 是一个用于生成 Echarts 图表的python类库，也非常好用。

关于ECharts和Pyecharts的资料网上非常多，就不细述了，大家自己找吧。

本文主要讲Pyqt5和Pyecharts的结合使用，Pyqt5和ECharts的结合使用。

Pyqt5的数据可视化

在讲ECharts和Pyecharts之前，先说下pyqt5的数据可视化。

pyqt5的数据可视化工具很多。有pyqt5自带的QtChart可以做，有PyQtGraph可以做，有Plotly可以做，当然还有Pyecharts和Echarts可以做，等等等等。

个人也刚开始做数据可视化，这几个工具都摸了一下，发现最后还是Pyecharts和Echarts最好用，最美观，最方便。

而且，考虑到pyqt5打包的问题，这几个库（除了QtChart），都存在同样的困难。所以，最终我选的就是Pyecharts和Echarts。

Pyecharts和Echarts，为什么我一直分开说呢？因为在pyqt5的程序里，你可以单单使用Pyecharts来实现数据可视化，也可以单单使用Echarts来实现数据可视化。

Pyecharts和Echarts的底层原理肯定是一样的，但在pyqt5的程序里去实现，差别却很大。

Pyecharts相对方便，因为直接用的python语言来实现，但有个问题让我无法接受，因为用pyinstaller竟然无法打包Pyecharts！ 网上关于这个问题的解决方案很多，但我尝试了，都没有用。我还尝试去修改Pyecharts源码，大半天也没实现，终于放弃。

最后，通过一位大神的文章《Python数据可视化：PyQt与ECharts的完美结合方案》，发现在pyqt5的程序里，直接使用echarts，其实也很方便，很好用，而且使用pyinstaller打包，无任何障碍，因为根本没有不需要加载任何类库模块，就是直接编辑HTML文本就行了。

下面，Pyecharts和Echarts的两种实现代码，我都分享一下，希望对大家有帮助。

废话不说，上代码。

pyqt5和pyecharts的结合使用，但无法使用pyinstaller打包

【如下代码，完全复制，直接运行，即可使用】

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView

from pyecharts.charts import Line
from pyecharts import options
################################################
#######创建主窗口
################################################
class MainWindow(QMainWindow):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('My Browser')
        self.showMaximized()

        self.webview = QWebEngineView()
        self.setCentralWidget(self.webview)
        ###############################################
        self.goto_creat_pyecharts()



    def goto_creat_pyecharts(self):
        ######################################################
        the_abscissa_list = ["周一","周二","周三","周四","周五","周六","周日"]
        the_allmoney_list = [800,700,500,600,500,400,900]
        the_allpoints_list = [200,300,100,200,300,100,400]
        ######################################################
        line = (
            Line()
                .add_xaxis(xaxis_data=the_abscissa_list)
                .add_yaxis(series_name="营业总额", y_axis=the_allmoney_list, symbol="circle", is_symbol_show=True,is_smooth=True,is_selected=True)
                .add_yaxis(series_name="积分总额", y_axis=the_allpoints_list, symbol="circle", is_symbol_show=True,is_smooth=True,is_selected=True)
                .set_global_opts(title_opts=options.TitleOpts(title="每周营收折线图"))
        )

        #############################################
        the_sourceFile_origin = ("D:/monthcountview.html")
        line.render(path=the_sourceFile_origin)
        self.webview.load(QUrl.fromLocalFile(the_sourceFile_origin))



################################################
#######程序入门
################################################
if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())


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

pyqt5和echarts的结合使用，可以使用pyinstaller打包

【如下代码，完全复制，直接运行，即可使用】

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView


################################################
#######创建主窗口
################################################
class MainWindow(QMainWindow):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('My Browser')
        self.showMaximized()

        self.webview = QWebEngineView()
        self.setCentralWidget(self.webview)
        ###############################################
        self.goto_creat_echarts_html()






    def goto_creat_echarts_html(self):
        ###################################################
        the_html_content ='''
        <!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=dataset-link
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



setTimeout(function () {

    option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {focus: 'data'},
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: 'product',
                    value: '2012',
                    tooltip: '2012'
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    myChart.setOption(option);

});

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>
        '''
        ###########################################
        self.webview.setHtml(the_html_content)






################################################
#######程序入门
################################################
if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())



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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

pyqt5和echarts的结合使用，再说明

综上所述，如果有pyinstaller打包需求的，推荐大家使用pyqt5和echarts的结合使用。

echarts的图表html模板，可以去官网的示例进行下载就可。官网很多示例的，需要哪个图表模板，就点击【下载示例】即可。

html的文本编辑，参数传递，就是最原始的字符串操作，这里就不细说了，基本操作嘛，就是繁琐一点，但不复杂。

这里，展示一下我的一个饼图html文本编辑，以供参考。

    #创建图表
    def goto_creat_echarts_byhtml(self,all_datas):
        ##############################################
        the_html_content ='''
        <!DOCTYPE html>
        <html >
        <head>
            <meta charset="utf-8">
        </head>
        <body style="width:800px; height:300px;margin:auto;top:30px">
        <div id="container" style="width:800px; height:300px;margin:auto;top:30px"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script type="text/javascript"> 
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                var option;
                option = {
                    tooltip: {
                        trigger: 'item',
                    },
                    title: {
                        text: '商城专递员专递单数',
                        left: 'left'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                    },'''


        #######设置##########################################################################
        the_html_content=the_html_content+'''series: ['''
        ############
        the_html_content =the_html_content + "{name: '专递单数',type: 'pie',radius:'70%',emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},data:["
        for i in range(len(all_datas)):
            the_html_content = the_html_content+"{value:"  + str(all_datas[i][4]-all_datas[i][5])+", name: '"+ all_datas[i][3]+"-"+all_datas[i][1] + "'},"
        the_html_content = the_html_content+"]},"
        ############

        #######################################################################################

        the_html_content = the_html_content + ''']};
        if (option && typeof option === 'object') {myChart.setOption(option);}
        </script>
        </body>
        </html>
        '''

        #########################################################
        self.webview.setHtml(the_html_content)



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

---

本文如有帮助，敬请留言鼓励。
本文如有错误，敬请留言改进。