快捷導(dǎo)航

使用wxPython和ECharts實(shí)現(xiàn)生成和保存HTML圖表

更新時間：2023年08月17日 08:35:22 作者：winfredzhang

wxPython是一個基于wxWidgets的Python?GUI庫，ECharts是一個用于數(shù)據(jù)可視化的JavaScript庫，本文主要為大家介紹了如何使用wxPython和ECharts庫來生成和保存HTML圖表，感興趣的可以學(xué)習(xí)一下

安裝依賴

在開始之前，我們需要確保已經(jīng)安裝了必要的依賴庫。你可以使用以下命令來安裝wxPython和ECharts庫：

pip install wxPython

創(chuàng)建應(yīng)用程序窗口

首先，讓我們來創(chuàng)建一個應(yīng)用程序窗口，作為圖表生成和保存的界面。

import wx
import wx.html2 as webview
class MainFrame(wx.Frame):
    def __init__(self):
        super().__init__(None, title="HTML Viewer", size=(800, 600))
        self.panel = wx.Panel(self)
        # 創(chuàng)建GUI組件
        self.echart_memo = wx.TextCtrl(self.panel, style=wx.TE_MULTILINE)
        self.button_generate = wx.Button(self.panel, label="生成")
        self.button_save = wx.Button(self.panel, label="保存")
        self.web = None
        # 綁定事件處理函數(shù)
        self.button_generate.Bind(wx.EVT_BUTTON, self.on_generate)
        self.button_save.Bind(wx.EVT_BUTTON, self.on_save)
        # 創(chuàng)建布局
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(self.echart_memo, proportion=1, flag=wx.EXPAND)
        sizer.Add(self.button_generate, flag=wx.EXPAND)
        sizer.Add(self.button_save, flag=wx.EXPAND)
        self.panel.SetSizer(sizer)

在上述代碼中，我們創(chuàng)建了一個名為MainFrame的類，它繼承自wx.Frame。在構(gòu)造函數(shù)中，我們創(chuàng)建了用于輸入ECharts選項(xiàng)的文本框、生成和保存圖表的按鈕，并將它們添加到一個垂直布局的面板中。

生成和保存圖表

接下來，我們將實(shí)現(xiàn)生成和保存圖表的功能。

    def on_generate(self, event):
        echart_options = self.echart_memo.GetValue()
        if self.web is not None:
            self.web.Destroy()
        self.web = webview.WebView.New(self.panel, -1, parent=self.panel, style=wx.NO_BORDER)
        sizer = self.panel.GetSizer()
        sizer.Add(self.web, proportion=1, flag=wx.EXPAND)
        self.panel.Layout()
        # 構(gòu)建完整的HTML文件
        html = f'''
        <html>
        <head>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
            <script type="text/javascript">
                var chartDom = document.getElementById('echart-container');
                var myChart = echarts.init(chartDom);
                var option = {echart_options};
                myChart.setOption(option);
            </script>
        </head>
        <body>
            <div id="echart-container" style="width: 100%; height: 400px;"></div>
        </body>
        </html>
        '''
        self.web.SetPage(html, "")
    def on_save(self, event):
        echart_options = self.echart_memo.GetValue()
        # 構(gòu)建完整的HTML文件
        html = f'''
        <html>
        <head>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
            <script type="text/javascript">
                var chartDom = document.getElementById('echart-container');
                var myChart = echarts.init(chartDom);
                var option = {echart_options};
                myChart.setOption(option);
            </script>
        </head>
        <body>
            <div id="echart-container" style="width: 100%; height: 400px;"></div>
        </body>
        </html>
        '''
        # 保存HTML文件
        current_datetime = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
        file_path = f"./html/{current_datetime}.html"
        with open(file_path, "w") as file:
            file.write(html)
        wx.MessageBox(f"保存成功！文件路徑：{file_path}", "保存成功", wx.OK | wx.ICON_INFORMATION)

在上述代碼中，我們定義了 on_generate 和 on_save 兩個方法。 on_generate 方法在用戶點(diǎn)擊"生成"按鈕時被調(diào)用，它從文本框中獲取ECharts選項(xiàng)，并根據(jù)選項(xiàng)動態(tài)生成包含圖表的HTML字符串。然后，我們使用wxWebView組件將HTML字符串加載到應(yīng)用程序窗口中，以顯示生成的圖表。

on_save 方法在用戶點(diǎn)擊"保存"按鈕時被調(diào)用，它與 on_generate 方法類似，但還將生成的HTML字符串保存為一個HTML文件。文件名使用當(dāng)前時間戳來確保每個文件具有唯一名稱。保存成功后，我們使用wx.MessageBox顯示一個消息框，通知用戶保存操作成功，并顯示保存的文件路徑。

運(yùn)行應(yīng)用程序

最后，我們創(chuàng)建一個wx.App實(shí)例，實(shí)例化MainFrame類，并運(yùn)行應(yīng)用程序的事件循環(huán)。

if __name__ == "__main__":
    app = wx.App()
    frame = MainFrame()
    frame.Show()
    app.MainLoop()

以上代碼片段創(chuàng)建了一個wx.App實(shí)例，并初始化了應(yīng)用程序的GUI。然后，我們顯示主窗口，并通過調(diào)用 app.MainLoop() 方法啟動應(yīng)用程序的事件循環(huán)，使應(yīng)用程序保持運(yùn)行狀態(tài)。

完整代碼

import wx
import wx.html2 as webview
import datetime
class MainFrame(wx.Frame):
    def __init__(self):
        super().__init__(None, title="HTML Viewer", size=(800, 600))
        self.panel = wx.Panel(self)
        self.echart_memo = wx.TextCtrl(self.panel, style=wx.TE_MULTILINE)
        self.button_generate = wx.Button(self.panel, label="生成")
        self.button_save = wx.Button(self.panel, label="保存")
        self.web = webview.WebView.New(self.panel)
        self.button_generate.Bind(wx.EVT_BUTTON, self.on_generate)
        self.button_save.Bind(wx.EVT_BUTTON, self.on_save)
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(self.echart_memo, proportion=1, flag=wx.EXPAND)
        sizer.Add(self.button_generate, flag=wx.EXPAND)
        sizer.Add(self.button_save, flag=wx.EXPAND)
        sizer.Add(self.web, proportion=1, flag=wx.EXPAND)
        self.panel.SetSizer(sizer)
    def on_generate(self, event):
        echart_options = self.echart_memo.GetValue()
        # 構(gòu)建完整的HTML文件
        html = f'''
         <html>
        <head>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
        </head>
        <body>
            <div id="chart-container" style="width: 100%; height: 400px;"></div>
                        <script>              
                var chart = echarts.init(document.getElementById('chart-container'));
                var  {echart_options}
                chart.setOption(option);
            </script>
        </body>
        </html>
        '''
        self.web.SetPage(html, "")
    def on_save(self, event):
        echart_options = self.echart_memo.GetValue()
        # 構(gòu)建完整的HTML文件
        # html = f'''
        html = f'''
         <html>
        <head>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
        </head>
        <body>
            <div id="chart-container" style="width: 100%; height: 400px;"></div>
                        <script>              
                var chart = echarts.init(document.getElementById('chart-container'));
                var  {echart_options}
                chart.setOption(option);
            </script>
        </body>
        </html>
        '''
        # 保存HTML文件
        current_datetime = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
        file_path = f"../html/{current_datetime}.html"
        with open(file_path, "w") as file:
            file.write(html)
        wx.MessageBox(f"保存成功！文件路徑：{file_path}", "保存成功", wx.OK | wx.ICON_INFORMATION)
if __name__ == '__main__':
    app = wx.App()
    frame = MainFrame()
    frame.Show()
    app.MainLoop()

結(jié)論

本篇博客介紹了如何使用wxPython和ECharts庫來生成和保存HTML圖表。通過結(jié)合wxPython的GUI組件和ECharts的數(shù)據(jù)可視化功能，我們可以輕松創(chuàng)建一個圖表生成和保存工具。用戶只需輸入ECharts選項(xiàng)，點(diǎn)擊生成按鈕即可在應(yīng)用程序窗口中實(shí)時查看圖表，并能夠?qū)D表保存為HTML文件以供進(jìn)一步使用。

到此這篇關(guān)于使用wxPython和ECharts實(shí)現(xiàn)生成和保存HTML圖表的文章就介紹到這了,更多相關(guān)wxPython ECharts生成HTML圖表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: