TOP

echarts隱藏之后的顯示問題
2017-10-10 12:44:19 】 瀏覽:9973
Tags:

好久沒有更新博客了优乐棋牌app下载,今天搞了快一天的網頁自適應,頭暈。。。因為最近開始做項目,項目中需要用到圖表方面的知識,于是乎接觸到了echarts,所以其實我也算是新手了。只是近幾天弄了很久的關于圖表隱藏之后再次顯示,卻無法顯示出來的問題。在網上也搜尋了好久。都沒有特別對口的答案,echarts圖表一直是顯示的到還沒發現有什么異常,只是如果你想要做類似選項卡切換圖表的隱藏和顯示的話,這個問題就不得不直視了。廢話講了那么多,開始說解決方法。

     在解決之前需要知道原因:相信網上一搜,基本上就可以確定大多數的情況都是一樣的,那就是echarts圖表隱藏之后再次顯示可能會涉及到沒有高寬度的問題优乐棋牌app下载,或者你可以右擊檢查一下你的圖表的寬度此時是0還是NaN!!!  那么知道沒有高寬度,那么就需要在display:block顯示之前給它一個寬高,這樣就沒有問題了。那么這個寬高的設置可以有兩種設置方法(目前我可以知道的想到的),一是在行間設置寬高,這樣的寬高度就是固定的,永遠都是那么多,比如說這樣

     

這樣子設置之后的話,可通過設置一個按鈕來顯示圖表,那么顯示是成功了,但是如果想要自適應窗口大小,跟隨窗口大小變化而變化优乐棋牌app下载,那么這種方式就不可取了,就需要使用一種相對的寬高了,你有沒有想到呢?那就是當前窗口的大小了,window.innerHeight   window.innerWidth;那么如果是兩個圖表,像我這樣的話,可以封裝一個函數來設置圖表的寬和高,像這樣:

  

 

但是我先說我這種寫法比較死,高度沒有用窗口的高度,寬度的話窗口寬度太寬了,所以我大概減了80px;沒有把對象抽象出來當成參數來傳遞,所以不具有代碼的復用性,大家可以根據這個自行封裝一個復用性高的函數,那么這就是為兩個圖表設置好了寬度和高度,接下來就是在顯示之前調用一下該函數,那么就意味著在顯示之前我的圖表有了寬度和高度,那么就可以顯示了,如果想要改變窗口大小的時候圖表也跟著變化的話,那么就由需要做一點小工作,如下:

  后邊的兩個語句的意思是說(因為我有兩個按鈕,用于切換兩個圖表,那么每次按鈕點擊的時候都會自動去觸發window.onresize事件,而不用等到我手動的去拖動窗口的時候,才去觸發,這樣的話就可以實現隨時的自適應大小,而不會出現點擊第一個按鈕改變窗體大小之后,再去點擊第二個按鈕,會發現第二個按鈕對應的圖表沒有根據之前變化的窗體大小而變化),所以要加上這么一句自動替我們觸發resize事件,這是jquery的語法,不太清楚的童鞋可以百度一下。最后,還有一點:

這塊代碼就是自適應窗體大小的代碼,這句和上面的trigger那句不沖突不重復的,一個是改變窗體大小,一個是點擊按鈕,兩個都需要觸發resize事件。

差不多就這些玩意兒了,大家可以根據自己的情況做相應的小調整,基本上就可以解決大多數這種類型的狀況了。

 

 

 

 

 

請關注公眾號獲取更多資料



】【打印繁體】【】【】 【】【】【】 【關閉】 【返回頂部
上一篇設計模式之責任鏈模式 下一篇HTTP協議詳解