VueJs 监听 window.resize 方法

在echart中使用
第一步：在html标签中使用id，vue会根据echart会填充整个id的宽度，定高

 
                <div id="chartColumn" style="width:100%; height:400px;"></div>

第二步：在data中定义

 data() {
            return {
                myChart: null,
                screenWidth: document.body.clientWidth，
                }
}，

第三步：在mounted中挂载一下

 mounted: function () {
            this.init();
        },

第四步：在method中执行方法

  init(){
                const that = this
                window.onresize = () => {
                    return (() => {
                        window.screenWidth = document.body.clientWidth
                        that.screenWidth = window.screenWidth
                    })()
                }
            },

第五步：优化 因为 频繁 触发 resize 函数，导致页面很卡的 问题

 watch: {
            screenWidth (val) {
                if (!this.timer) {
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(() => {
                        that.myChart.resize()
                        that.init()
                        that.timer = false
                    }, 400)
                }
            }
        }