Vue检测屏幕变化来改变不同的charts样式实例

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

methods: {
 // 关闭监控ip执行详情页
  closePerfExe () {   
   this.isShowPerfExe = false // 控制当前dom容器的显示
   // 当在监控ip详情页点击回性能分析页的时候，加个延迟主动触发窗口变化，这样窗口改变性能分析页就不会发生图表显示不完整的情况了
   // 这里的代码是关键！！！
   setTimeout( () => {
    let triggerResize = new Event('resize')
    window.dispatchEvent(triggerResize)
   },0)
  }
}

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', this.resizePerformanceFun)
 },
 methods : {
 resizePerformanceFun () {
    if(this.myChartPerformance){
    // console.log('窗口改变了，重新渲染图形')
    this.myChartPerformance.resize()
   }
  }
}