当echarts图表要跟随父元素宽高而变化时,我们需要对他的父级元素进行监听,但是resize只能对windows窗口进行监听,对普通dom元素进行监听是不行的.
1.轮循(不优雅)
2.MutationObserver、ResizeObserver 有兼容性问题
3.使用iframe模拟window的resize
创建一个隐藏的iframe 让他与父元素的宽高相等 添加到父元素里 这样父元素宽高改变的时候 iframe也会跟着改变 然后我们监听contentWindow就可以了(注意:父元素得position:relative定位)
observe(dom,handler) {// 创建一个iframelet frame = document.createElement('iframe')// 添加样式 脱离文档流 与父元素宽高相等const css ="position:absolute;left:0;top:-100%;width:100%;height:100%;visibility:hidden;pointer-events:none;";frame.style.cssText = css;// frame加载成功后监听resize事件frame.onload = () => {frame.contentWindow.addEventListener('resize',() => {handler(dom);})};// 把frame添加到父元素里dom.appendChild(frame);return frame;}// 调用let parent = this.$refs.parent.$el;this.observe(parent, () => {this.myChart.resize();});
