Echarts图表监听父容器尺寸变化触发resize()，自适应宽高变化

场景

很多时候我们会在绘制echarts图表时，使用以下方法监听浏览器尺寸变化，让图表resize()完成响应式

window.addEventListener('resize', ()=>{
	wordCloudChart.resize()
})

然后，有些时候，比如在B端，经常会有侧边栏的宽度变化影响我们工作区各种div的尺寸自动变化，这时候就迫切地需要echarts能够随父容器尺寸变化而响应式调整自身尺寸

解决方案 - ResizeObserver API

浏览器提供的这个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

关于ResizeObserver更多请看MDN - ResizeObserver