浏览器提供的这个API可以监听指定单个element元素的尺寸变化，并在变化时触发对应的回调函数，借此我们可以来监听父容器尺寸变化从而触发resize()

举个例子

<el-col :span="9" class="chartContainer" id="wc"><div class="title">词云</div><div id="wordCloud" class="grid-content bg-purple card" ref="wordCloud"></div>
</el-col>

wordCloud.setOption(wcOptions)
const watchChartWc = new ResizeObserver(() => {wordCloud.resize()
})// 使用observe开启监听, onObserve可以取消监听
watchChartWc.observe(document.getElementById('wc'))

ResizeObserver.observe()接受两个参数，第一个是指定的单个element, 第二个是options

但是, 这又会遇到一个问题, 当页面中同时存在多个图表时，侧边栏宽度变化引起每个图表resize()时，页面性能会严重下降, 侧边栏的动画会出现特别明显的卡顿。解决方法是: 防抖

所以完整的版本应当为:

wordCloud.setOption(wcOptions)
const watchChartWc = new ResizeObserver(() => {debounce(() => { wordCloud.resize() }, 300)
})// 使用observe开启监听, onObserve可以取消监听
watchChartWc.observe(document.getElementById('wc'))

其中debounce()为自己封装并引入的防抖函数

若一个页面中有多个图表，且它们会因为同一个原因resize()，比如上面说的，B端中侧边栏宽度变化带来的图表父容器宽度变化从而引起图表resize()，多个图表都只因为这个原因触发resize()，那么这时候就不应该创建多个ResizeObserver去分别监听每个图表的父容器, 否则就算防抖，展开会收起侧边栏时，页面仍然会出现肉眼可见的明显卡顿。这种情况下，因为每个父容器都是随着页面最大的div变化而变化的，所以这时候应该用ResizeObserver去监听页面最大的div。这种方法下，肉眼可见的卡顿消失了，非常丝滑.

页面结构大致如下

<template><div id="container"><div> ... </div></div>
</template>

注意：这种情况下要异步操作，在所有图表都渲染完毕后，再开启监听

const watchCharts = new ResizeObserver(() => {debounce(() => { wordCloud.resize()userChart.resize()courseChart.resize()// ...}, 300)
})// 使用observe开启监听, onObserve可以取消监听
watchCharts.observe(document.getElementById('container'))

写在最后

如果父容器是自适应的, 那么使用了ResizeObserver就不需要再使用window.addEventListener('resize', ()=>{})

最后请不要忘记在页面销毁前调用unobserve()取消ResizeObserver的监听：

watchChartWc.unobserve(document.getElementById('wc'))

关于ResizeObserver更多请看MDN - ResizeObserver