大家好，我是早起。
如果你嘗試用 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）感興趣的讀者可以下載嘗試！
各位夥伴們好，詹帥本帥搭建了一個個人博客和小程序，匯集各種乾貨和資源，也方便大家閱讀，感興趣的小夥伴請移步小程序體驗一下哦！（歡迎提建議）