Vue檢測(cè)屏幕變化來改變不同的charts樣式實(shí)例
css中我們經(jīng)常會(huì)通過媒體查詢就可以完成對(duì)不同的屏幕展現(xiàn)不同的樣式
在js中我們也可以通過檢測(cè)屏幕的變化來展現(xiàn)不同的樣式
在我的實(shí)例中:因?yàn)榈谝淮未蜷_也不知道到底是應(yīng)該展示哪一個(gè)屏幕,所以會(huì)進(jìn)行先判斷一次,之后用addEventListener來是實(shí)現(xiàn)功能,暫時(shí)是通過這種方式實(shí)現(xiàn)的,以后有更好的方法再更新。。。
mounted() { this.checkScreen() }, methods: { // 屏幕檢測(cè)變化 checkScreen() { var _this = this if (document.body.clientWidth > 500) { _this.echartsOne() } else { _this.echartsTwoPhone() } window.addEventListener('resize', () => { if (document.body.clientWidth < 500) { _this.echartsTwoPhone() } else { _this.echartsOne() } }) } }
補(bǔ)充知識(shí):vue中處理echarts因v-if切換后圖形顯示異常+實(shí)現(xiàn)echarts監(jiān)聽窗口變化而改變大小
一、處理echarts因v-if切換后圖形顯示異常
有時(shí)候我們需要在一個(gè)頁面中使用v-if來顯示不同的兩個(gè)圖表。
視覺效果上好像是從一個(gè)頁面點(diǎn)擊鏈接跳轉(zhuǎn)到另一個(gè)頁面,但其實(shí)原理是通過銷毀和重建兩個(gè)不同dom容器來實(shí)現(xiàn)這個(gè)效果。
可能會(huì)出現(xiàn)的問題:
在切換到另一個(gè)圖表顯示的時(shí)候,改變了窗口寬度高度,那么點(diǎn)擊返回按鈕時(shí)看到原先的echarts圖形就會(huì)有一部分消失顯示不完整了。
解決辦法:
我們需要在返回這個(gè)按鈕上加個(gè)定時(shí)器延遲,來主動(dòng)觸發(fā)窗口發(fā)生變化(前提是代碼也有做監(jiān)聽窗口變化改變圖形大小的操作,下面標(biāo)題二會(huì)講解)。這樣圖形能正確自動(dòng)渲染變化一次。
methods: { // 關(guān)閉監(jiān)控ip執(zhí)行詳情頁 closePerfExe () { this.isShowPerfExe = false // 控制當(dāng)前dom容器的顯示 // 當(dāng)在監(jiān)控ip詳情頁點(diǎn)擊回性能分析頁的時(shí)候,加個(gè)延遲主動(dòng)觸發(fā)窗口變化,這樣窗口改變性能分析頁就不會(huì)發(fā)生圖表顯示不完整的情況了 // 這里的代碼是關(guān)鍵?。。? setTimeout( () => { let triggerResize = new Event('resize') window.dispatchEvent(triggerResize) },0) } }
二、vue實(shí)現(xiàn)echarts監(jiān)聽窗口變化而改變大小
監(jiān)聽窗口的變化,echarts圖形大小跟著變化。
注意:在組件銷毀時(shí)記得也要移除監(jiān)聽。
data () { return { myChartPerformance: '', // echarts的dom容器 performanceOption: '' // echarts配置項(xiàng)option } }, mounted () { // 一般我為了防止出現(xiàn)一些切換問題,都是先清除echarts再初始化 if(this.myChartPerformance){ this.myChartPerformance.clear() } this.myChartPerformance = echarts.init(document.getElementById('myChartPerformance')) // 圖表數(shù)據(jù)配置 this.performanceOption = { title: { text: chartOptions.titleName }, tooltip: { trigger: 'axis' }, //......... //......... } // 設(shè)置圖表數(shù)據(jù)配置 this.myChartPerformance.setOption(this.performanceOption) // 監(jiān)聽窗口大小改變圖表大?。ㄏ纫瞥俦O(jiān)聽,防止出錯(cuò)) window.removeEventListener('resize', this.resizePerformanceFun) window.addEventListener('resize', this.resizePerformanceFun) }, beforeDestroy () { // 組件銷毀前移除監(jiān)聽 window.removeEventListener('resize', this.resizePerformanceFun) }, methods : { resizePerformanceFun () { if(this.myChartPerformance){ // console.log('窗口改變了,重新渲染圖形') this.myChartPerformance.resize() } } }
以上這篇Vue檢測(cè)屏幕變化來改變不同的charts樣式實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)便捷接入百度地圖API
部分項(xiàng)目需要地圖的嵌入,這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法,其他的地圖調(diào)用與之類似,有需要的朋友可以借鑒參考下,希望能夠有所幫助2022-04-04Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細(xì),對(duì)同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下2023-02-02淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見,下面就來詳細(xì)的介紹一下2018-11-11vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例
下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景
這篇文章主要介紹了vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07