css中我們經常會通過媒體查詢就可以完成對不同的螢幕展現不同的樣式

在js中我們也可以通過檢測螢幕的變化來展現不同的樣式

在我的例項中：因為第一次開啟也不知道到底是應該展示哪一個螢幕，所以會進行先判斷一次，之後用addEventListener來是實現功能，暫時是通過這種方式實現的，以後有更好的方法再更新。。。

 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()
     }
   })
  }
}

補充知識：vue中處理echarts因v-if切換後圖形顯示異常+實現echarts監聽視窗變化而改變大小

一、處理echarts因v-if切換後圖形顯示異常

有時候我們需要在一個頁面中使用v-if來顯示不同的兩個圖表。

視覺效果上好像是從一個頁面點選連結跳轉到另一個頁面，但其實原理是通過銷燬和重建兩個不同dom容器來實現這個效果。

可能會出現的問題:

在切換到另一個圖表顯示的時候，改變了視窗寬度高度，那麼點選返回按鈕時看到原先的echarts圖形就會有一部分消失顯示不完整了。

解決辦法：

我們需要在返回這個按鈕上加個定時器延遲，來主動觸發視窗發生變化（前提是程式碼也有做監聽視窗變化改變圖形大小的操作，下面標題二會講解）。這樣圖形能正確自動渲染變化一次。

methods: {
 // 關閉監控ip執行詳情頁
  closePerfExe () {   
   this.isShowPerfExe = false // 控制當前dom容器的顯示
   // 當在監控ip詳情頁點選回效能分析頁的時候，加個延遲主動觸發視窗變化，這樣視窗改變效能分析頁就不會發生圖表顯示不完整的情況了
   // 這裡的程式碼是關鍵！！！
   setTimeout( () => {
    let triggerResize = new Event('resize')
    window.dispatchEvent(triggerResize)
   },0)
  }
}

二、vue實現echarts監聽視窗變化而改變大小

監聽視窗的變化，echarts圖形大小跟著變化。

注意：在元件銷燬時記得也要移除監聽。

data () {
 return {
 myChartPerformance: '',// echarts的dom容器
 performanceOption: '' // echarts配置項option
 } 
 },mounted () {
  // 一般我為了防止出現一些切換問題，都是先清除echarts再初始化
    if(this.myChartPerformance){
     this.myChartPerformance.clear()
    }
    this.myChartPerformance = echarts.init(document.getElementById('myChartPerformance'))

  // 圖表資料配置
    this.performanceOption = {
    title: {
     text: chartOptions.titleName
    },tooltip: {
     trigger: 'axis'
    },//.........
    //.........
   }
   // 設定圖表資料配置
   this.myChartPerformance.setOption(this.performanceOption)
  // 監聽視窗大小改變圖表大小（先移除再監聽，防止出錯）
   window.removeEventListener('resize',this.resizePerformanceFun)
   window.addEventListener('resize',this.resizePerformanceFun)
 },beforeDestroy () {
  // 元件銷燬前移除監聽
 window.removeEventListener('resize',methods : {
 resizePerformanceFun () {
    if(this.myChartPerformance){
    // console.log('視窗改變了，重新渲染圖形')
    this.myChartPerformance.resize()
   }
  }
}

以上這篇Vue檢測螢幕變化來改變不同的charts樣式例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。