好久沒有更新博客了，今天搞了快一天的網頁自適應，頭暈。。。因為最近開始做項目，項目中需要用到圖表方面的知識，於是乎接觸到了echarts，所以其實我也算是新手了。只是近幾天弄了很久的關於圖表隱藏之後再次顯示，卻無法顯示出來的問題。在網上也搜尋了好久。都沒有特別對口的答案，echarts圖表一直是顯示 ...
好久沒有更新博客了，今天搞了快一天的網頁自適應，頭暈。。。因為最近開始做項目，項目中需要用到圖表方面的知識，於是乎接觸到了echarts，所以其實我也算是新手了。只是近幾天弄了很久的關於圖表隱藏之後再次顯示，卻無法顯示出來的問題。在網上也搜尋了好久。都沒有特別對口的答案，echarts圖表一直是顯示的到還沒發現有什麼異常，只是如果你想要做類似選項卡切換圖表的隱藏和顯示的話，這個問題就不得不直視了。廢話講了那麼多，開始說解決方法。
在解決之前需要知道原因：相信網上一搜，基本上就可以確定大多數的情況都是一樣的，那就是echarts圖表隱藏之後再次顯示可能會涉及到沒有高寬度的問題，或者你可以右擊檢查一下你的圖表的寬度此時是0還是NaN!!! 那麼知道沒有高寬度，那麼就需要在display:block顯示之前給它一個寬高，這樣就沒有問題了。那麼這個寬高的設置可以有兩種設置方法（目前我可以知道的想到的），一是在行間設置寬高，這樣的寬高度就是固定的，永遠都是那麼多，比如說這樣
這樣子設置之後的話，可通過設置一個按鈕來顯示圖表，那麼顯示是成功了，但是如果想要自適應視窗大小，跟隨視窗大小變化而變化，那麼這種方式就不可取了，就需要使用一種相對的寬高了，你有沒有想到呢？那就是當前視窗的大小了，window.innerHeight window.innerWidth;那麼如果是兩個圖表，像我這樣的話，可以封裝一個函數來設置圖表的寬和高，像這樣：
但是我先說我這種寫法比較死，高度沒有用視窗的高度，寬度的話視窗寬度太寬了，所以我大概減了80px;沒有把對象抽象出來當成參數來傳遞，所以不具有代碼的復用性，大家可以根據這個自行封裝一個復用性高的函數，那麼這就是為兩個圖表設置好了寬度和高度，接下來就是在顯示之前調用一下該函數，那麼就意味著在顯示之前我的圖表有了寬度和高度，那麼就可以顯示了，如果想要改變視窗大小的時候圖表也跟著變化的話，那麼就由需要做一點小工作，如下：
後邊的兩個語句的意思是說（因為我有兩個按鈕，用於切換兩個圖表，那麼每次按鈕點擊的時候都會自動去觸發window.onresize事件，而不用等到我手動的去拖動視窗的時候，才去觸發，這樣的話就可以實現隨時的自適應大小，而不會出現點擊第一個按鈕改變窗體大小之後，再去點擊第二個按鈕，會發現第二個按鈕對應的圖表沒有根據之前變化的窗體大小而變化），所以要加上這麼一句自動替我們觸發resize事件，這是jquery的語法，不太清楚的童鞋可以百度一下。最後，還有一點:
這塊代碼就是自適應窗體大小的代碼，這句和上面的trigger那句不衝突不重覆的，一個是改變窗體大小，一個是點擊按鈕，兩個都需要觸發resize事件。
差不多就這些玩意兒了，大家可以根據自己的情況做相應的小調整，基本上就可以解決大多數這種類型的狀況了。
