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子组件,如下



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

父组件代码:

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)