多个echarts在vue3内使用自适应事件引发的问题

情况是这样：
一个.vue文件中有很多个echarts图表，我把每个echarts图表都单独拎出来弄成组件，然后在每个echarts组件内监听窗口变化：

window.addEventListener('resize', debounce(() => {
  myCharts.resize()
}, 500)) // debounce是防抖函数

发现只有最后一个图表能跟着窗口自适应
我估计是因为在同一个界面，vue是单页面，所以展示这个页面的时候，组件也会引入进来进行渲染，所以就会有这种情况：

window.addEventListener('resize', ....)
window.addEventListener('resize', ....)
...

多次对window全局对象监听中resize执行回调，所以只有最后一次回调生效。
最后解决办法：
在父组件中监听：

window.addEventListener('resize', debounce(() => {
  fleetE.value.echartsObj.myCharts.resize()
  volumeE.value.echartsObj.myCharts.resize()
  valueE.value.echartsObj.myCharts.resize()
}, 500))

通过ref拿到子组件，然后调用子组件中echartsObj.myCharts的 resize 方法
注意，vue3中在子组件中要把某个属性或方法通过defineExpose暴露出去，父组件才能拿到对应的属性或方法。

defineExpose({ echartsObj })

以上内容如有错误，请不吝赐教！