Vue檢測屏幕變化來改變不同的charts樣式實(shí)例

更新時(shí)間：2020年10月26日 09:15:49 作者：GllWyz

這篇文章主要介紹了Vue檢測屏幕變化來改變不同的charts樣式實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: