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打包

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

代码语言：txt复制

import sys

代码语言：txt复制

from PyQt5.QtWidgets import *

代码语言：txt复制

from PyQt5.QtCore import *

代码语言：txt复制

from PyQt5.QtWebEngineWidgets import QWebEngineView

代码语言：txt复制

from pyecharts.charts import Line

代码语言：txt复制

from pyecharts import options

代码语言：txt复制

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

代码语言：txt复制

#######创建主窗口

代码语言：txt复制

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

代码语言：txt复制

class MainWindow(QMainWindow):

代码语言：txt复制

    def __init__(self, *args, **kwargs):

代码语言：txt复制

        super().__init__(*args, **kwargs)

代码语言：txt复制

        self.setWindowTitle('My Browser')

代码语言：txt复制

        self.showMaximized()

代码语言：txt复制

        self.webview = QWebEngineView()

代码语言：txt复制

        self.setCentralWidget(self.webview)

代码语言：txt复制

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

代码语言：txt复制

        self.goto_creat_pyecharts()

代码语言：txt复制

    def goto_creat_pyecharts(self):

代码语言：txt复制

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

代码语言：txt复制

        the_abscissa_list = ["周一","周二","周三","周四","周五","周六","周日"]

代码语言：txt复制

        the_allmoney_list = [800,700,500,600,500,400,900]

代码语言：txt复制

        the_allpoints_list = [200,300,100,200,300,100,400]

代码语言：txt复制

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

代码语言：txt复制

        line = (

代码语言：txt复制

            Line()

代码语言：txt复制

                .add_xaxis(xaxis_data=the_abscissa_list)

代码语言：txt复制

                .add_yaxis(series_name="营业总额", y_axis=the_allmoney_list, symbol="circle", is_symbol_show=True,is_smooth=True,is_selected=True)

代码语言：txt复制

                .add_yaxis(series_name="积分总额", y_axis=the_allpoints_list, symbol="circle", is_symbol_show=True,is_smooth=True,is_selected=True)

代码语言：txt复制

                .set_global_opts(title_opts=options.TitleOpts(title="每周营收折线图"))

代码语言：txt复制

        )

代码语言：txt复制

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

代码语言：txt复制

        the_sourceFile_origin = ("D:/monthcountview.html")

代码语言：txt复制

        line.render(path=the_sourceFile_origin)

代码语言：txt复制

        self.webview.load(QUrl.fromLocalFile(the_sourceFile_origin))

代码语言：txt复制

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

代码语言：txt复制

#######程序入门

代码语言：txt复制

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

代码语言：txt复制

if __name__ == "__main__":

代码语言：txt复制

    app = QApplication(sys.argv)

代码语言：txt复制

    w = MainWindow()

代码语言：txt复制

    w.show()

代码语言：txt复制

    sys.exit(app.exec_())

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

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

代码语言：txt复制

import sys

代码语言：txt复制

from PyQt5.QtWidgets import *

代码语言：txt复制

from PyQt5.QtCore import *

代码语言：txt复制

from PyQt5.QtWebEngineWidgets import QWebEngineView

代码语言：txt复制

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

代码语言：txt复制

#######创建主窗口

代码语言：txt复制

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

代码语言：txt复制

class MainWindow(QMainWindow):

代码语言：txt复制

    def __init__(self, *args, **kwargs):

代码语言：txt复制

        super().__init__(*args, **kwargs)

代码语言：txt复制

        self.setWindowTitle('My Browser')

代码语言：txt复制

        self.showMaximized()

代码语言：txt复制

        self.webview = QWebEngineView()

代码语言：txt复制

        self.setCentralWidget(self.webview)

代码语言：txt复制

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

代码语言：txt复制

        self.goto_creat_echarts_html()

代码语言：txt复制

    def goto_creat_echarts_html(self):

代码语言：txt复制

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

代码语言：txt复制

        the_html_content ='''

代码语言：txt复制

        <!--

代码语言：txt复制

    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=dataset-link

代码语言：txt复制

-->

代码语言：txt复制

<!DOCTYPE html>

代码语言：txt复制

<html style="height: 100%">

代码语言：txt复制

    <head>

代码语言：txt复制

        <meta charset="utf-8">

代码语言：txt复制

    </head>

代码语言：txt复制

    <body style="height: 100%; margin: 0">

代码语言：txt复制

        <div id="container" style="height: 100%"></div>

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

代码语言：txt复制

        <!-- Uncomment this line if you want to dataTool extension

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>

代码语言：txt复制

        -->

代码语言：txt复制

        <!-- Uncomment this line if you want to use gl extension

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>

代码语言：txt复制

        -->

代码语言：txt复制

        <!-- Uncomment this line if you want to echarts-stat extension

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>

代码语言：txt复制

        -->

代码语言：txt复制

        <!-- Uncomment this line if you want to use map

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>

代码语言：txt复制

        -->

代码语言：txt复制

        <!-- Uncomment these two lines if you want to use bmap extension

代码语言：txt复制

        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>

代码语言：txt复制

        -->

代码语言：txt复制

        <script type="text/javascript">

代码语言：txt复制

var dom = document.getElementById("container");

代码语言：txt复制

var myChart = echarts.init(dom);

代码语言：txt复制

var app = {};

代码语言：txt复制

var option;

代码语言：txt复制

setTimeout(function () {

代码语言：txt复制

    option = {

代码语言：txt复制

        legend: {},

代码语言：txt复制

        tooltip: {

代码语言：txt复制

            trigger: 'axis',

代码语言：txt复制

            showContent: false

代码语言：txt复制

        },

代码语言：txt复制

        dataset: {

代码语言：txt复制

            source: [

代码语言：txt复制

                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],

代码语言：txt复制

                ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],

代码语言：txt复制

                ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],

代码语言：txt复制

                ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],

代码语言：txt复制

                ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]

代码语言：txt复制

            ]

代码语言：txt复制

        },

代码语言：txt复制

        xAxis: {type: 'category'},

代码语言：txt复制

        yAxis: {gridIndex: 0},

代码语言：txt复制

        grid: {top: '55%'},

代码语言：txt复制

        series: [

代码语言：txt复制

            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},

代码语言：txt复制

            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},

代码语言：txt复制

            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},

代码语言：txt复制

            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},

代码语言：txt复制

            {

代码语言：txt复制

                type: 'pie',

代码语言：txt复制

                id: 'pie',

代码语言：txt复制

                radius: '30%',

代码语言：txt复制

                center: ['50%', '25%'],

代码语言：txt复制

                emphasis: {focus: 'data'},

代码语言：txt复制

                label: {

代码语言：txt复制

                    formatter: '{b}: {@2012} ({d}%)'

代码语言：txt复制

                },

代码语言：txt复制

                encode: {

代码语言：txt复制

                    itemName: 'product',

代码语言：txt复制

                    value: '2012',

代码语言：txt复制

                    tooltip: '2012'

代码语言：txt复制

                }

代码语言：txt复制

            }

代码语言：txt复制

        ]

代码语言：txt复制

    };

代码语言：txt复制

    myChart.on('updateAxisPointer', function (event) {

代码语言：txt复制

        var xAxisInfo = event.axesInfo[0];

代码语言：txt复制

        if (xAxisInfo) {

代码语言：txt复制

            var dimension = xAxisInfo.value   1;

代码语言：txt复制

            myChart.setOption({

代码语言：txt复制

                series: {

代码语言：txt复制

                    id: 'pie',

代码语言：txt复制

                    label: {

代码语言：txt复制

                        formatter: '{b}: {@['   dimension   ']} ({d}%)'

代码语言：txt复制

                    },

代码语言：txt复制

                    encode: {

代码语言：txt复制

                        value: dimension,

代码语言：txt复制

                        tooltip: dimension

代码语言：txt复制

                    }

代码语言：txt复制

                }

代码语言：txt复制

            });

代码语言：txt复制

        }

代码语言：txt复制

    });

代码语言：txt复制

    myChart.setOption(option);

代码语言：txt复制

});

代码语言：txt复制

if (option && typeof option === 'object') {

代码语言：txt复制

    myChart.setOption(option);

代码语言：txt复制

}

代码语言：txt复制

        </script>

代码语言：txt复制

    </body>

代码语言：txt复制

</html>

代码语言：txt复制

        '''

代码语言：txt复制

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

代码语言：txt复制

        self.webview.setHtml(the_html_content)

代码语言：txt复制

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

代码语言：txt复制

#######程序入门

代码语言：txt复制

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

代码语言：txt复制

if __name__ == "__main__":

代码语言：txt复制

    app = QApplication(sys.argv)

代码语言：txt复制

    w = MainWindow()

代码语言：txt复制

    w.show()

代码语言：txt复制

    sys.exit(app.exec_())

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

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

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

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

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

代码语言：txt复制

    #创建图表

代码语言：txt复制

    def goto_creat_echarts_byhtml(self,all_datas):

代码语言：txt复制

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

代码语言：txt复制

        the_html_content ='''

代码语言：txt复制

        <!DOCTYPE html>

代码语言：txt复制

        <html >

代码语言：txt复制

        <head>

代码语言：txt复制

            <meta charset="utf-8">

代码语言：txt复制

        </head>

代码语言：txt复制

        <body style="width:800px; height:300px;margin:auto;top:30px">

代码语言：txt复制

        <div id="container" style="width:800px; height:300px;margin:auto;top:30px"></div>

代码语言：txt复制

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

代码语言：txt复制

        <script type="text/javascript"> 

代码语言：txt复制

                var dom = document.getElementById("container");

代码语言：txt复制

                var myChart = echarts.init(dom);

代码语言：txt复制

                var app = {};

代码语言：txt复制

                var option;

代码语言：txt复制

                option = {

代码语言：txt复制

                    tooltip: {

代码语言：txt复制

                        trigger: 'item',

代码语言：txt复制

                    },

代码语言：txt复制

                    title: {

代码语言：txt复制

                        text: '商城专递员专递单数',

代码语言：txt复制

                        left: 'left'

代码语言：txt复制

                    },

代码语言：txt复制

                    legend: {

代码语言：txt复制

                        orient: 'vertical',

代码语言：txt复制

                        left: 'right',

代码语言：txt复制

                    },'''

代码语言：txt复制

        #######设置##########################################################################

代码语言：txt复制

        the_html_content=the_html_content '''series: ['''

代码语言：txt复制

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

代码语言：txt复制

        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:["

代码语言：txt复制

        for i in range(len(all_datas)):

代码语言：txt复制

            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]   "'},"

代码语言：txt复制

        the_html_content = the_html_content "]},"

代码语言：txt复制

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

代码语言：txt复制

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

代码语言：txt复制

        the_html_content = the_html_content   ''']};

代码语言：txt复制

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

代码语言：txt复制

        </script>

代码语言：txt复制

        </body>

代码语言：txt复制

        </html>

代码语言：txt复制

        '''

代码语言：txt复制

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

代码语言：txt复制

        self.webview.setHtml(the_html_content)

数据可视化 打包 qt 编程算法 html

0 人点赞