解決echarts圖表使用v-show控制圖表顯示不全的問題
最近做echarts圖表時，因為涉及到使用開關(guān)變量控制不同圖表的顯示隱藏，用 v-if 時會出現(xiàn)沒有獲取到dom結(jié)構(gòu)而報錯，所以改用 v-show，但是 v-show 本身是結(jié)構(gòu)已經(jīng)存在，當數(shù)據(jù)發(fā)生變化時，結(jié)構(gòu)并未重新渲染，所以會出現(xiàn) echarts 圖表未獲取到最外層大盒子的寬度而顯示一半的情況，就像下圖：
還折騰了半天，其實就是當數(shù)據(jù)請求出來后，調(diào)用繪制ehcarts時圖表的時候，用 Vue.nextTick(function () { // DOM 更新了 }) 主動觸發(fā)一下圖表，使之強制渲染就可以正常顯示了
正常顯示圖表：
補充知識：vue中v-if和v-show對echarts圖的影響
背景
前幾日在做UBA項目的時候有一個頁面需要用echarts圖展示用戶對各個節(jié)目的點播量，頁面結(jié)構(gòu)為左側(cè)柱狀圖展示節(jié)目點播量，右側(cè)餅圖和折線圖展示某個節(jié)目的用戶點播分布和用戶點播變化趨勢（如下圖），因為我們造的數(shù)據(jù)是11月26日的，而進入頁面默認查詢最近1天的，所以剛進來肯定是查不到數(shù)據(jù)，需要自行選擇時間去查詢數(shù)據(jù)。而在查數(shù)據(jù)的時候出現(xiàn)了echarts折線圖無法正確獲取寬高的情況。
解決
后來在走讀代碼的過程中我發(fā)現(xiàn)對于右側(cè)餅圖和折線圖的組件我是用v-show判斷的，當?shù)谝淮螞]查到數(shù)據(jù)的時候，右邊的echarts圖也已經(jīng)初始化了，并且由于v-show的display:none而沒有拿到正確的寬高，這才出現(xiàn)的上圖的這種現(xiàn)象。而餅圖沒有出現(xiàn)這種現(xiàn)象大概是因為餅圖中沒有設(shè)置grid:{containLabel:true}。后來我將v-show改成了v-if，只有當柱狀圖獲取到了數(shù)據(jù)才加載右邊的元素，就再也不會有這種問題了。
以上這篇解決echarts圖表使用v-show控制圖表顯示不全的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vite中如何使用@?配置路徑別名，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法
Vue 3 引入了一個全新的響應(yīng)式系統(tǒng),其中最核心的就是 reactive 和 ref,它們是實現(xiàn)響應(yīng)式數(shù)據(jù)的基礎(chǔ),用于創(chuàng)建可以自動跟蹤變化并更新視圖的對象和變量,本文介紹了Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法,需要的朋友可以參考下2024-08-08
Vue.js實戰(zhàn)之使用Vuex + axios發(fā)送請求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請求的相關(guān)資料，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了table表格中使用el-popover 無效問題解決方法,實例只針對單個的按鈕管用在表格里每一列都有el-popover相當于是v-for遍歷了 所以我們在觸發(fā)按鈕的時候并不是單個的觸發(fā)某一個,需要的朋友可以參考下2024-01-01
在日常使用Vue開發(fā)項目的時候，計算屬性computed是一個非常常用的特性，本文就來分享一些使用Vue的computed計算屬性時的一些小技巧，希望能夠幫助到大家2023-06-06
本文主要介紹了vue組件中重新渲染的3種方式小結(jié),主要包括改變key,v-if,vm.$forceUpdate()這三種,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)點擊左右按鈕圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3+Element?Plus實現(xiàn)el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實現(xiàn)el-table跨行顯示(非腳手架),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
本文主要介紹了vue el-table實現(xiàn)遞歸嵌套的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue指令做滾動加載和監(jiān)聽等，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05