大家好，我是早起。

如果你嘗試用 Python 進(jìn)行可視化，會(huì)發(fā)現(xiàn)用起來(lái)很爽，但是保存或者展示確稍顯麻煩。

就拿 pyehcharts 來(lái)說(shuō)，如果在需要展示的時(shí)候啟動(dòng) notebook 現(xiàn)場(chǎng)執(zhí)行代碼，這應(yīng)該是最麻煩的方式。

另一種思路是導(dǎo)出為 html 或其他靜態(tài)文件，打開(kāi)進(jìn)行展示，這也是一種不錯(cuò)的方式，但是如果有很多個(gè)圖表呢？

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

當(dāng)然，去年分享過(guò)一篇結(jié)合 PPT 展示的教程，確實(shí)是一個(gè)不錯(cuò)的選擇，但是也稍顯麻煩。

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

但是吧，又是逃不過(guò) Django 這樣的大家伙，配置起來(lái)對(duì)不熟悉的小白來(lái)說(shuō)是非常折磨的。

那有沒(méi)有更優(yōu)雅的方法？選 PyWebIO ！還是將圖表放在網(wǎng)頁(yè)上，任何人都能訪問(wèn)查看交互式圖表與源碼，就像這樣??

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

如何實(shí)現(xiàn)

和之前的文章一樣，我們先思考一下如何實(shí)現(xiàn)，是先生成 html 還是打開(kāi)頁(yè)面時(shí)生成？

實(shí)際上還是事先生成的，同時(shí)保留html和py腳本，所以最簡(jiǎn)單的一個(gè) 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="我是副標(biāo)題"))
????
)

c.width?=?"100%"
put_html(c.render_notebook())

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

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

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

@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)

再啟動(dòng)項(xiàng)目即可看到我們制作的展示頁(yè)面

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

最終效果如下

最后只要將項(xiàng)目部署到到服務(wù)器，你就可以讓任何人看到你的可視化項(xiàng)目，是不是很酷！

當(dāng)然，上面是基于 pyecharts 進(jìn)行講解，實(shí)際上適用于任何 Python 可視化庫(kù)，只要按照相同的辦法制作即可，并且更重要的是，我們可以自由排列組合頁(yè)面內(nèi)容，并且根據(jù)需要添加更多的自定義元素！

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