vue 监听windows窗口大小变化

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