场景

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

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

然后，这种自适应真的足够周全嘛？有些时候，比如在B端，经常会有侧边栏的宽度变化影响我们工作区各种div的尺寸自动变化，如果淡村使用addEventListener，那么图表是不会resize()的，问题就出现了。这时候就迫切地需要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

但是, 这又会遇到一个问题, 当页面中同时存在多个图表时，侧边栏宽度变化引起每个图表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