vue 监听windows窗口大小变化

关注

原创最新推荐文章于 2026-07-18 17:07:29 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

vue 监听windows窗口大小变化同时修改页面所有echart的大小

网上有很多关于这方面的文章，搜索后大部分比较复杂，自己整理一下适合自己的，直接上代码

 data(){
        return {
         	timer: false
        }
},
mounted(){
        const that = this
        window.onresize = function(){
            if (!that.timer) {
                that.timer = true
                setTimeout(function () {
                    if(this.myChart){
				         this.myChart.resize()
				     }
                    that.timer = false
                }, 400)
            }
        }
    },

只需要监听窗口大小，上面的代码已经够了，然后是echart大小改变的一个细节，我是每个echart图表都是一个组件，一个父组件有多个echart子组件，如下

<Radar  ref="Radar" class="radar" :series="radarSeries" :legend="[]"></Radar>
<AreaGraph ref="AreaGraph" class="graph" :series="areaGraphSeries"></AreaGraph>

开始我在每个子组件都写了一个上面的方法，但是发现页面只有一个图标会随着浏览器大小改变而改变，后面发现需要在父组件绑定才能同时改变所有的图表。水平有限不知道为什么，如果有大神有幸看到这篇文章可以帮我解疑，不胜感激。

父组件代码：

const that = this
        window.onresize = function(){
            if (!that.timer) {
                that.timer = true
                setTimeout(function () {
                    that.$refs.Radar.resizeChart()
                    that.$refs.AreaGraph.resizeChart()
                    that.timer = false
                }, 400)
            }
        }

子组件代码：

 resizeChart(){
 	 if(this.myChart){
         this.myChart.resize()
     }
 },

收录于

vue

echart

标签

#vue

windows.resize监听事件导致浏览器cpu占用高 1.场景：最近在实现一个监控系统的dashboard页面，这个页面上有很多的echarts图表，当浏览器窗口大小变化时，页面的所有数据要重新计算宽高值，于是使用了window.addEventListener("resize") 来解决这个问题。 2. 结果：在使用过程中，发现当浏览器窗口多次改变大小之后，页面卡顿的很厉害，查看浏览器的cpu占用率也很高，迟迟降不下来。郁闷中～，因为在之前的项目中也使用过监听事件，但没有发现过这个问题，就很自信～，罪过呀 3.排查了很长时间，各种百度，无意中看到wind 阅读详情

vue 监听windows窗口大小变化

vue 监听windows窗口大小变化 同时修改页面所有echart的大小

父组件代码：

子组件代码：

相关推荐

vue 监听windows窗口大小变化同时修改页面所有echart的大小