[[434305]]

大家好，我是早起。

如果你嘗試用 Python 進行可視化，會發現用起來很爽，但是保存或者展示確稍顯麻煩。

就拿 pyehcharts 來說，如果在需要展示的時候啟動 notebook 現場執行代碼，這應該是最麻煩的方式。

另一種思路是導出為 html 或其他靜態文件，打開進行展示，這也是一種不錯的方式，但是如果有很多個圖表呢?

你會說，pyecharts 自帶圖表組合，將多個圖表組合在一起輸出到一個 html 中，但凡是用過這個功能的人都會說不僅難用，并且很難增加一些自定義的元素。

當然，去年分享過一篇結合 PPT 展示的教程，確實是一個不錯的選擇，但是也稍顯麻煩。

所以，在之前，我的一個解決方案是將這一堆圖表輸出為 html 格式，然后使用 iframe 嵌入前端頁面中，當然這是基于 Django ，并且需要自己寫前端的 style ，就像去年分享的疫情追蹤大屏

但是吧，又是逃不過 Django 這樣的大家伙，配置起來對不熟悉的小白來說是非常折磨的。

那有沒有更優雅的方法?選 PyWebIO !還是將圖表放在網頁上，任何人都能訪問查看交互式圖表與源碼，就像這樣?

原視頻

就像上面展示的一樣，不論是 pyecharts 還是 plotly 還是 bokeh 都可以完美的掛在網站上，按照自己預設的方式，保留一些交互功能與源碼查看!并且更重要的是，我們可以自由排列組合頁面內容，并且根據需要添加更多的自定義元素! 下面就來介紹下制作過程。

如何實現

和之前的文章一樣，我們先思考一下如何實現，是先生成 html 還是打開頁面時生成?

實際上還是事先生成的，同時保留html和py腳本，所以最簡單的一個 pyecharts 代碼可以這么寫

from pywebio.output import put_html 
from pyecharts import options as opts 
from pyecharts.charts import Bar 
from pyecharts.faker import Faker 
 
 
c = ( 
    Bar() 
    .add_xaxis(Faker.choose()) 
    .add_yaxis("商家A", Faker.values()) 
    .add_yaxis("商家B", Faker.values()) 
    .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副標題")) 
     
) 
 
c.width = "100%" 
put_html(c.render_notebook()) 

第一部分是 pyecharts 制作圖表的部分，不多解釋

重要的是最后一行，通過 put_html() 嵌入 PyWebIO 中，這樣我們這個圖的腳本就搞定了，接下來只要如法炮制，制作更多的圖表腳本。

下面是主函數部分，如何將這些腳本嵌入并展示，首先是搜索全部腳本文件，之后使用open(html_file).read()打開之前生成的圖表，再使用put_collapse(t('Show source code', '查看源碼'), put_code(code, 'python'))預覽代碼即可，代碼如下

@use_scope('content', clear=True) 
def show_demo(name): 
    if name not in t(all_demos, all_demos_zh): 
        return 
 
    with use_scope('loading'): 
        put_text('Loading...') 
        put_loading() 
 
    base_dir = path.join(src_path, name) 
    files = os.listdir(base_dir) 
    for file in files: 
        if not file.endswith('.py'): 
            continue 
        name = file[:-len(".py")] 
 
        html_file = path.join(base_dir, 'output', name) + '.html' 
        try: 
            code = open(path.join(base_dir, file)).read() 
            html = open(html_file).read() 
        except: 
            continue 
 
        put_html(html) 
 
        # todo: if there is `open` calls, provide the file link 
        put_collapse(t('Show source code', '查看源碼'), put_code(code, 'python')) 
 
    scroll_to(position='top') 
    clear('loading') 

最后使用 put_buttons() 添加按鈕

put_buttons([(v, k) for k, v in t(all_demos, all_demos_zh).items()], onclick=show_demo) 

再啟動項目即可看到我們制作的展示頁面

start_server(pyecharts, port=8080, debug=True, auto_open_webbrowser=False) 

最終效果如下

最后只要將項目部署到到服務器，你就可以讓任何人看到你的可視化項目，是不是很酷!

當然，上面是基于 pyecharts 進行講解，實際上適用于任何 Python 可視化庫，只要按照相同的辦法制作即可，并且更重要的是，我們可以自由排列組合頁面內容，并且根據需要添加更多的自定義元素!

本文的代碼參考官方文檔 (https://github.com/wang0618/pywebio-chart-gallery/tree/master/pyecharts_demo)感興趣的讀者可以下載嘗試!