监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化

参考资料：ResizeObserver - Web API 接口参考 | MDN (mozilla.org)

搜索关键词：ResizeObserver

 

ResizeObserver

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

备注： 内容盒是盒模型放置内容的部分，这意味着边框盒减去内边距和边框的宽度就是内容盒。
边框盒包含内容、内边距和边框。有关进一步阐述，参见盒模型。

ResizeObserver 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。

它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。

ResizeObserver.observe()方法

ResizeObserver 接口的 observe() 方法用于监听指定的 Element 或 SVGElement。

resizeObserver.observe(divElem, { box : 'border-box' });

 

let chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
// 若dom尺寸变化，则resize
 
const chartObserver = new ResizeObserver(() => {
    myChart.resize();
});
chartObserver.observe(chartDom);