基于Echarts圖表在div動態(tài)切換時不顯示的解決方式
簡單粗暴,先上圖,大概長這樣:
在使用vue時有遇到像上圖下拉框change事件切換div,change切完后大概會變成這個樣子:
上代碼:
<div class="test"> <p class="title"> <select v-model="selected" v-on:change="change"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> </p> <span>{{selected}}</span> <div id="timesharechart" v-show="isvisible" ></div> <div id="receiveDispose" v-show="!isvisible"></div> </div> <script> export default{ name:"test", data(){ return { selected: 'timeshare', options: [ { text: '分時警情', value: 'timeshare' }, { text: '接警與處置', value: 'receive' } ], isvisible:true } }, methods:{ change:function(){ if(this.selected == "receive"){ this.isvisible = false; }else{ this.isvisible = true; } }, </script>
這里時我們?yōu)榱舜_定當(dāng)前顯示的是哪個block,所以在data中引入了“selected”,方便其他操作,其實完全可以采用change事件和v-if指令來判斷 true和false的方法來切換block。
code:
change:function(){ if(this.isvisible == true){ this.isvisible = false; }else{ this.isvisible = true; } }
這樣就變成了true, false。
那么問題來了:
以上解決了change事件對div圖表容器的切換顯示內(nèi)容,但是問題是切換后不顯示圖表,控制臺報錯:“Can't get dom width or height”,檢查了遍div容器是設(shè)置了大小的,上網(wǎng)一查才知道是因為echarts只能在顯示的容器中渲染,解決辦法:在容器切換之后再渲染圖表,也就是在觸發(fā)切換的事件中操作echarts初始化,我是這么解決的,在調(diào)用echart.init之前,給圖形dom加上對應(yīng)的寬度和高度。
drawCharts(){ // 基于準(zhǔn)備好的dom,初始化echarts實例,dom容器中需要在調(diào)用echart.init之前,必須給圖形dom加上對應(yīng)的寬度和高度,不然echarts不能渲染 document.getElementById("container").style.display = "block"; let myChart = this.$echarts.init(document.getElementById('container')); // 繪制圖表 receiveChart.setOption({}); }
其他tab,button等切換方式如出一轍。
補(bǔ)充知識:echarts切換后頁面空白
我遇到的問題是切換后頁面空白,切換第二次頁面出現(xiàn)了echarts圖。為了解決這個問題,我再頁面初始化時就調(diào)用了隱藏的echarts方法,雖然解決了第一次切換沒圖的問題,但同時出現(xiàn)了第二個問題,echarts圖的大小需要在改變?yōu)g覽器后才跟設(shè)置大小一致。
后面通過百度說寬高必須限制死,所以我把寬度從百分比設(shè)置為600px,暫時解決這個問題。
以上這篇基于Echarts圖表在div動態(tài)切換時不顯示的解決方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue表單綁定的實例代碼(單選按鈕,選擇框(單選時,多選時,用 v-for 渲染的動態(tài)選項)
本文通過實例代碼給大家介紹了Vue表單綁定(單選按鈕,選擇框(單選時,多選時,用 v-for 渲染的動態(tài)選項)的相關(guān)知識,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)
使用uniapp開發(fā)微信小程序時,多多少少會遇到獲取當(dāng)前位置的詳細(xì)信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下2023-04-04VUE 實現(xiàn)動態(tài)給對象增加屬性,并觸發(fā)視圖更新操作示例
這篇文章主要介紹了VUE 實現(xiàn)動態(tài)給對象增加屬性,并觸發(fā)視圖更新操作,涉及vue.js對象屬性動態(tài)操作及視圖更新相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-11-11關(guān)于vue自適應(yīng)布局(各種瀏覽器,分辨率)的示例代碼
這篇文章主要介紹了vue自適應(yīng)布局(各種瀏覽器,分辨率),主要使用了flex布局的flex:1屬性和自適應(yīng)的css+vh+百分比這種方式,開局設(shè)置overflow:hidden,主體main部分要設(shè)置:overflow:auto,需要的朋友可以參考下2022-09-09vue作用域插槽詳解、slot、v-slot、slot-scope
這篇文章主要介紹了vue作用域插槽詳解、slot、v-slot、slot-scope,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03