Vue檢測屏幕變化來改變不同的charts樣式實(shí)例
css中我們經(jīng)常會(huì)通過媒體查詢就可以完成對(duì)不同的屏幕展現(xiàn)不同的樣式
在js中我們也可以通過檢測屏幕的變化來展現(xiàn)不同的樣式
在我的實(shí)例中:因?yàn)榈谝淮未蜷_也不知道到底是應(yīng)該展示哪一個(gè)屏幕,所以會(huì)進(jìn)行先判斷一次,之后用addEventListener來是實(shí)現(xiàn)功能,暫時(shí)是通過這種方式實(shí)現(xiàn)的,以后有更好的方法再更新。。。
mounted() {
this.checkScreen()
},
methods: {
// 屏幕檢測變化
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)聽窗口大小改變圖表大小(先移除再監(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檢測屏幕變化來改變不同的charts樣式實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了Vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09
Vue項(xiàng)目前端部署詳細(xì)步驟(nginx方式)
Nginx(engine x)是一個(gè)高性能的HTTP和反向代理web服務(wù)器,是部署前端項(xiàng)目的首選,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目前端部署(nginx方式)的相關(guān)資料,需要的朋友可以參考下2023-09-09
Vue Element前端應(yīng)用開發(fā)之echarts圖表
在我們做應(yīng)用系統(tǒng)的時(shí)候,往往都會(huì)涉及圖表的展示,綜合的圖表展示能夠給客戶帶來視覺的享受和數(shù)據(jù)直觀體驗(yàn),同時(shí)也是增強(qiáng)客戶認(rèn)同感的舉措之一2021-05-05
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過程中,需要注意文件的格式和轉(zhuǎn)換方式,以及插件和組件的使用方法和注意事項(xiàng),需要的朋友可以參考下2023-05-05
Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11

