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

这篇文章主要介绍了Vue检测屏幕变化来改变不同的charts样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

css中我们经常会通过媒体查询就可以完成对不同的屏幕展现不同的样式

在js中我们也可以通过检测屏幕的变化来展现不同的样式

在我的实例中：因为第一次打开也不知道到底是应该展示哪一个屏幕，所以会进行先判断一次，之后用addEventListener来是实现功能，暂时是通过这种方式实现的，以后有更好的方法再更新。。。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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图形就会有一部分消失显示不完整了。

解决办法：

我们需要在返回这个按钮上加个定时器延迟，来主动触发窗口发生变化(前提是代码也有做监听窗口变化改变图形大小的操作，下面标题二会讲解)。这样图形能正确自动渲染变化一次。

1 2 3 4 5 6 7 8 9 10 11 12

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

二、vue实现echarts监听窗口变化而改变大小

监听窗口的变化，echarts图形大小跟着变化。

注意：在组件销毁时记得也要移除监听。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

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

以上这篇Vue检测屏幕变化来改变不同的charts样式实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

好了，今天的分享就到这里，希望大家喜欢！后台回复“421”即可获取下载链接密码！(后台回复即可得到下载地址链接，谨防举报或查水表的小伙伴，如果资源失效，烦请告知，第一时间修复近期资源)

喜欢就点个在看再走吧 资料下载

谢谢大家的支持，有了大家的支持我才更有动力去给大家更新干货黑科技！300个在看给我安排上！然后记得回复关键词，自取呦。看到这的，都是真粉丝，感谢你们，给我坚持下去的理由。

老规矩，兄弟们还记得么，右下角的 “在看” 点一下，文章最底部的小广gào 点一下，如果感觉分享的不错，记得分享朋友圈让更多的人知道！

您点的每个赞，我都认真当成了喜欢