解決echarts圖表使用v-show控制圖表顯示不全的問題
最近做echarts圖表時，因為涉及到使用開關(guān)變量控制不同圖表的顯示隱藏，用 v-if 時會出現(xiàn)沒有獲取到dom結(jié)構(gòu)而報錯，所以改用 v-show，但是 v-show 本身是結(jié)構(gòu)已經(jīng)存在，當(dāng)數(shù)據(jù)發(fā)生變化時，結(jié)構(gòu)并未重新渲染，所以會出現(xiàn) echarts 圖表未獲取到最外層大盒子的寬度而顯示一半的情況，就像下圖：
還折騰了半天，其實就是當(dāng)數(shù)據(jù)請求出來后，調(diào)用繪制ehcarts時圖表的時候，用 Vue.nextTick(function () { // DOM 更新了 }) 主動觸發(fā)一下圖表，使之強(qiáng)制渲染就可以正常顯示了
正常顯示圖表：
補(bǔ)充知識：vue中v-if和v-show對echarts圖的影響
背景
前幾日在做UBA項目的時候有一個頁面需要用echarts圖展示用戶對各個節(jié)目的點(diǎn)播量，頁面結(jié)構(gòu)為左側(cè)柱狀圖展示節(jié)目點(diǎn)播量，右側(cè)餅圖和折線圖展示某個節(jié)目的用戶點(diǎn)播分布和用戶點(diǎn)播變化趨勢（如下圖），因為我們造的數(shù)據(jù)是11月26日的，而進(jìn)入頁面默認(rèn)查詢最近1天的，所以剛進(jìn)來肯定是查不到數(shù)據(jù)，需要自行選擇時間去查詢數(shù)據(jù)。而在查數(shù)據(jù)的時候出現(xiàn)了echarts折線圖無法正確獲取寬高的情況。
解決
后來在走讀代碼的過程中我發(fā)現(xiàn)對于右側(cè)餅圖和折線圖的組件我是用v-show判斷的，當(dāng)?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，只有當(dāng)柱狀圖獲取到了數(shù)據(jù)才加載右邊的元素，就再也不會有這種問題了。
以上這篇解決echarts圖表使用v-show控制圖表顯示不全的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
el-select選擇器組件下拉框增加自定義按鈕的實現(xiàn)
本文主要介紹了el-select選擇器組件下拉框增加自定義按鈕的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例2017-03-03
下面小編就為大家?guī)硪黄猇ue2.0 axios前后端登陸攔截器(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單
這篇文章主要介紹了vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
Vuex?是一個專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vant的picker組件設(shè)置文字超長滾動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue中巧用三元表達(dá)式解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
基于vue3?vue-cli4?線上部署及優(yōu)化的問題
這篇文章主要介紹了基于vue3?vue-cli4?線上部署及優(yōu)化的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明
這篇文章主要介紹了vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題
今天小編就為大家分享一篇vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11