Vue detects screen changes to change different charts style instances

In css, we often display different styles for different screens through media queries

In js, we can also display different styles by detecting screen changes

In my example: Because I don't know which screen should be displayed when I open it for the first time, I will judge it first, and then use addEventListener to realize the function, which is realized in this way for the time being, and there is a better way to update it later. . .

 mounted() {
  this.checkScreen()
 },
methods: {
 //  Screen detection change 
  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()
     }
   })
  }
}

Supplementary knowledge: In vue, the processing of echarts changes its size due to the abnormal graphic display after v-if switching + the change of echarts monitoring window

1. Handle the abnormal graphic display of echarts due to v-if switching

Sometimes we need to use v-if in one page to display two different charts.

Visually, it seems to jump from one page to another by clicking a link, but in fact, the principle is to destroy and rebuild two different dom containers to achieve this effect.

Possible problems:

When switching to another chart display, change the window width and height, and when you click the Back button, you will see that the original echarts chart will disappear and be incomplete.

Solution:

We need to add a timer delay to the return button to actively trigger the window to change (provided that the code also listens for window changes and changes the graphic size, which will be explained in Title 2 below). In this way, the graphics can be automatically rendered and changed once correctly.

methods: {
 //  Turn off monitoring ip Execution Details Page 
  closePerfExe () {   
   this.isShowPerfExe = false //  Control the current dom Display of containers 
   //  While monitoring ip When the Details page clicks back to the Performance Analysis page, add a delay to trigger the window change actively, so that the window change performance analysis page will not have incomplete chart display 
   //  The code here is the key! ! ! 
   setTimeout( () => {
    let triggerResize = new Event('resize')
    window.dispatchEvent(triggerResize)
   },0)
  }
}

2. vue realizes that echarts listens to the change of window and changes its size

Listen to the change of window, and the size of echarts graphics changes accordingly.

Note: Remember to remove listening when the component is destroyed.

data () {
 return {
 myChartPerformance: '', // echarts Adj. dom Container 
 performanceOption: '' // echarts Configuration item option
 } 
 },
 mounted () {
  // 1 Like me in order to prevent it from appearing 1 Some switching problems are cleared first echarts Re-initialization 
    if(this.myChartPerformance){
     this.myChartPerformance.clear()
    }
    this.myChartPerformance = echarts.init(document.getElementById('myChartPerformance'))

  //  Chart data configuration 
    this.performanceOption = {
    title: {
     text: chartOptions.titleName
    },
    tooltip: {
     trigger: 'axis'
    },
    //.........
    //.........
   }
   //  Setting chart data configuration 
   this.myChartPerformance.setOption(this.performanceOption)
  //  Listening window size changes the chart size (remove it first and then listen to prevent errors) 
   window.removeEventListener('resize', this.resizePerformanceFun)
   window.addEventListener('resize', this.resizePerformanceFun)
 },
 beforeDestroy () {
  //  Remove listening before component destruction 
 window.removeEventListener('resize', this.resizePerformanceFun)
 },
 methods : {
 resizePerformanceFun () {
    if(this.myChartPerformance){
    // console.log(' Window changed, render graphics again ')
    this.myChartPerformance.resize()
   }
  }
}