大家好，我是早起。

如果你嘗試用 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?Fakerc?=?(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):returnwith?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'):continuename?=?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:continueput_html(html)#?todo:?if?there?is?`open`?calls,?provide?the?file?linkput_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）感興趣的讀者可以下載嘗試！

各位伙伴們好，詹帥本帥搭建了一個個人博客和小程序，匯集各種干貨和資源，也方便大家閱讀，感興趣的小伙伴請移步小程序體驗一下哦！（歡迎提建議）

推薦閱讀

牛逼！Python常用數據類型的基本操作（長文系列第①篇）

牛逼！Python的判斷、循環和各種表達式（長文系列第②篇）

牛逼！Python函數和文件操作（長文系列第③篇）

牛逼！Python錯誤、異常和模塊（長文系列第④篇）

總結

以上是生活随笔為你收集整理的别找了，这才是 Pyecharts 的正确打开方式！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。