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