? ? ? ? 去年整理了個pyecharts+flask制作數據大屏的基礎版，事情比較多，一直沒時間進一步完善。這篇進階版是基于上篇的基礎上，說明如何實現一個功能完整的數據大屏。

注：本人對CSS和JS并不熟悉，只能說會點皮毛，能看懂，而大屏要漂亮還是要個前端來調樣式的，這塊內容就不闡述了，本文的核心內容是解決完善數據大屏的過程中遇到的問題。

一、前提準備

? ? ? ? 查看這篇文章的前提是已經基于pyecharts + flask 搭建了一個能夠動態刷新數據的基礎大屏。具體可以參考：上一篇文章。

? ? ? ? 本文整個說明也是基于上篇文章Demo中的代碼進行優化，主要就：app.py和main.html兩個文件。

二、會遇到的問題

2.1JsCode在前后端分離情況下不生效的問題

formatter=JsCode("function(data){return data.name +':'+ data.value[2];}"),

? ? ? ? pyecharts的官方Demo里面，會有一些需要動態加載一些JS代碼的例子，這種功能在做數據大屏還是很有用的，比如需要根據查詢結構的優良中差，動態調整柱狀圖的顏色(Demo:Bar_custom_bar_color)。但是按照Demo去實際，會發現JsCode里面的JS代碼被當做字符串了（本地生成的html可以）。

問題原因：

? ? ? ? 通過ajax獲取后臺圖表option數據的時候，這段JS代碼是作為字符串傳到前端的，有“”雙引號。

解決方案：

? ? ? ? 我用的是死辦法，或返回option數據的時候，把雙引號去掉，代碼如下（代碼沒怎么優化）

def myUpdateJsCode(strSrc):strOut = strSrcbOK = Falsewhile bOK == False:re_ser = re.search("\"\s*function", strOut)if re_ser:index = re_ser.span()[0]strOut = strOut[:index] + strOut[index + 1:]iend = strOut.index("\"", index) # 遍歷下一個",function不能再有雙引號strOut = strOut[:iend] + strOut[iend + 1:]else:bOK = Truereturn strOut

? ? ? ? 前端html，發送ajax請求的地方也需要做修改：

function fetchData1() {$.ajax({type: "GET",url: "http://127.0.0.1:5000/mapChart",//dataType: 'json',success: function (result) {var re_obj = (new Function("return " + result))();map.setOption(re_obj);}});}

2.2圖表布局的問題

? ? ? ? 有時候柱狀圖的列名特別長，就是加傾斜后，顯示效果并不是太好，可以在圖表上面套一層Grid,來調整div內的顯示布局

c = (Grid().add(bar, grid_opts=opts.GridOpts(pos_left="20%",pos_bottom="10%",pos_top="15%")))

? ? ? ? 通過pos?上下左右的調整能得到一個比較好的顯示，return的是這個grid（return c）

2.3圖表點擊事件

? ? ? ? 這個記得是從echars的官方文檔看來的，代碼如下：

//點擊事件mychart.on('click', function (params) {alert("單擊了"+params.name+"_____"+params.value); //這里根據實際的需要編寫其他內容，如跳轉到詳情頁面});

? ? ? ? mychart?是對應圖表的對象。

2.4表格的繪制

? ? ? ? 數據大屏除了圖就是表格了。表格的繪制跟pyecharts就沒什么關系了，ajax + html去實現的了。這個在上一篇文章源碼里面有，就不再描述了。實現方案就是動態填充表格的html代碼。

?2.5跨域問題

????????前端頁面在請求后臺數據的時候，是通過ajax請求訪問的，頁面里面會寫一個請求地址。有時候我們發布到不同環境時，突然會發現頁面上大數據展示不出來了。是因為ajax請求里面配置的地址不是當前系統的訪問地址。

??????? 目前我的解決方案就是換一個部署環境需要同時修改ajax的請求地址（有時候也會忘）。

2.6其他

? ? ? ? 其他的基本就基于pyecharts的官方文檔調圖表的具體展示細節了。目前做的這個大屏就遇到這些問題，若后面還有再補充。

三、總結

1.pyecharts實現前后端分離的基礎過程：html頁面里面提供基礎的布局，然后通過ajax請求從后臺獲取該圖表的Option數據，然后就setOption生成圖片。實際遇到一些問題可以和本地生成的圖表html進行比較，看Option數據差在哪，進而再解決相應問題。

2.pyecharts是基于echarts的，有些pyecharts官方文檔不涉及的內容，可以直接查看echarts的文檔說明去解決，所以這兩個文檔都比較重要，比較好的是都是中文文檔，讀起來比較輕松。

另外下面兩個配置項對于調整圖表的美觀很重要！多用用就熟悉了，看官方文檔就行。

set_global_opts #設置全局配置 set_series_opts #設置系列配置

3.自學前端或找個前端。

總結

以上是生活随笔為你收集整理的pyecharts+flask制作数据大屏-进阶的全部內容，希望文章能夠幫你解決所遇到的問題。

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