Pyecharts + Flask 資料視覺化
前一篇我們提到使用 ECharts 框架，與 Flask Web 結合，做出漂亮的視覺化圖表，可以參考：
但相信很多人會遇到一個問題，就是前端畫面的開發者，跟後端的開發者，是兩個完全不同的人，這樣就容易導致圖表在呈現上，容易有溝通不良的情形發生。
以 ECharts 的架構，若後端提供的資料量較大，勢必要調整 Javascript 圖形的大小參數，前端來來回回跟著調整，還不如 Streamlit 一路到底比較暢通，但 Dashboard 講求的是好開發、好維運，所以我們透過 Pyecharts 來嘗試解決前後端分工問題。
Pyecharts
Pyecharts 是由 ECharts 結合 python 演化而來，沒有百度實驗室的支持，完全透過社群力量支撐的開源框架，可以參考官方網站。
Pyecharts 最主要的差異，在於將 option 抽離 JS，改使用 python 來進行撰寫，這樣的好處是後端開發可以直接將圖表的資料、定義一次解決，前端只要負責最最最單純的渲染就好。
安裝很簡單，就pip install pyecharts即可。
當你以為 Pyecharts 是類似於 plotly 之類的框架時，它的卻狠狠打了你一巴掌，因為它的輸出圖表方式與一般框架不太一樣。
首先它把圖形分成幾個種類，然後使用 add 的方式加入參數，最後再透過render()函數將圖畫出來，可以參考說明網站，也是中文的~
BUT！這個render() 是把這個圖產出一個html檔，打開這個檔案才能看到圖表，而且還是 default 產 html！
不禁令人懷疑，開發者是嗑了什麼，為什麼會這樣設計？🙄🙄🙄
如果要用 jupyter notebook 來顯示圖表，可以用 render_notebook() 函數，但若是使用 vscode 或其他 IDE 就沒辦法顯示了。
但如果要渲染在 Flask 上的畫，官方有提供一個函數 render_embed()，我們就來看怎麼使用吧。
Flask Web
網頁的部分，使用Flask作為網頁後端框架，詳細可以參考之前的文章：
但這次做一個簡單的 Flask Web 示範即可，資料架構如下，單純的兩個檔案即可：
+
│ main.py
│
└─templates
index.html原則上跟之前 Echarts 的範例幾乎是一樣的， CDN 依然先載入，然後在 div 的區塊，增加 style 來畫框框，標示預計顯示圖表的位置。
但這次我們先把圖表的資訊寫在 main.py 裡，並且在 index.html 使用 {{data_plot|safe}} 直接將圖表渲染出來，如下圖：
尷尬的事情發生了，圖表完全超出我們想像的邊界。
如果要調整大小，依然要進去後端調參數，這樣就完全喪失我們前後端分工的想法，後端還要之前畫面的 div 長寬才能設定。
dump_options 方法
為了解決這個問題，我們把絲路釐清一下，如果說把圖表的 option 留給後端，前端不要純渲染，透過 Javascript 來調整圖表的大小，似乎就能解決我們的問題。
因此我們要用到 pyecharts 的 dump_options() 函數，讓後端純輸出 option 資訊即可，程式碼如下：
index.html 我們加上 script 區塊，單純做 echarts setOption的動作，這樣一來就是結合 Pyecharts 跟 Echarts 的所長，做到前後端分離，畫面渲染如下：
圖表終於完美 fit 我們的 div 區塊，而且前後端的分工明確，前端不用再擔心圖表大小調整問題，可喜可賀~
熟悉了 Pyecharts 的使用方法，做出漂亮的 Dashboard 也只是一步之遙了，剩下就是資料如何取得及更新。
在官方文檔中有寫出 flask 的幾種串接方式，也有透過 ajax 來實現動態更新的效果，可以結合本文的新方法，做出最適合應用場景的圖表。
