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