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

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

一、前提準(zhǔn)備

? ? ? ? 查看這篇文章的前提是已經(jīng)基于pyecharts + flask 搭建了一個能夠動態(tài)刷新數(shù)據(jù)的基礎(chǔ)大屏。具體可以參考：上一篇文章。

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

二、會遇到的問題

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

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

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

問題原因：

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

解決方案：

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

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，發(fā)送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,來調(diào)整div內(nèi)的顯示布局

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

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

2.3圖表點擊事件

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

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

? ? ? ? mychart?是對應(yīng)圖表的對象。

2.4表格的繪制

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

?2.5跨域問題

????????前端頁面在請求后臺數(shù)據(jù)的時候，是通過ajax請求訪問的，頁面里面會寫一個請求地址。有時候我們發(fā)布到不同環(huán)境時，突然會發(fā)現(xiàn)頁面上大數(shù)據(jù)展示不出來了。是因為ajax請求里面配置的地址不是當(dāng)前系統(tǒng)的訪問地址。

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

2.6其他

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

三、總結(jié)

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

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

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

set_global_opts #設(shè)置全局配置 set_series_opts #設(shè)置系列配置

3.自學(xué)前端或找個前端。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。