解決echarts圖表使用v-show控制圖表顯示不全的問題
最近做echarts圖表時，因為涉及到使用開關變數控制不同圖表的顯示隱藏，用 v-if 時會出現沒有獲取到dom結構而報錯，所以改用 v-show，但是 v-show 本身是結構已經存在，當資料發生變化時，結構並未重新渲染，所以會出現 echarts 圖表未獲取到最外層大盒子的寬度而顯示一半的情況，就像下圖：
還折騰了半天，其實就是當資料請求出來後，呼叫繪製ehcarts時圖表的時候，用 Vue.nextTick(function () { // DOM 更新了 }) 主動觸發一下圖表，使之強制渲染就可以正常顯示了
正常顯示圖表：
補充知識：vue中v-if和v-show對echarts圖的影響
背景
前幾日在做UBA專案的時候有一個頁面需要用echarts圖展示使用者對各個節目的點播量，頁面結構為左側柱狀圖展示節目點播量，右側餅圖和折線圖展示某個節目的使用者點播分佈和使用者點播變化趨勢（如下圖），因為我們造的資料是11月26日的，而進入頁面預設查詢最近1天的，所以剛進來肯定是查不到資料，需要自行選擇時間去查詢資料。而在查資料的時候出現了echarts折線圖無法正確獲取寬高的情況。
解決
後來在走讀程式碼的過程中我發現對於右側餅圖和折線圖的元件我是用v-show判斷的，當第一次沒查到資料的時候，右邊的echarts圖也已經初始化了，並且由於v-show的display:none而沒有拿到正確的寬高，這才出現的上圖的這種現象。而餅圖沒有出現這種現象大概是因為餅圖中沒有設定grid:{containLabel:true}。後來我將v-show改成了v-if，只有當柱狀圖獲取到了資料才載入右邊的元素，就再也不會有這種問題了。
以上這篇解決echarts圖表使用v-show控制圖表顯示不全的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。