ResizeObserver监听画布尺寸改变动态渲染echarts
前言：
在日常开发中有时遇到同数据相关的业务可能会用到echarts插件。一般在封装echarts组件的时候大家可能都会通过windows对象监听浏览器窗口大小的改变动态渲染echarts,这样当echarts窗口改变导致echarts画布元素大小改变的同时，就能调用相关api进行重绘。这样统计图就能一直充满canvas画布了，并能适配尺寸的电脑屏幕。
但是在有些业务场景下，对于同一台电脑而言，窗口大小不会改变，但是会动态修改echarts绑定的dom元素的宽高。这个时候通过Windows对象监听resize事件就不符合当前业务要求了。
此时可以通过ResizeObserve对象监听echarts绑定元素，一旦绑定元素尺寸改变，就可以调用相关api 重新进行绘制了。
一：相关API
ResizeObserver.disconnect()
取消特定观察者目标上所有对 Element 的监听。
ResizeObserver.observe()。
开始对指定 Element 的监听。
ResizeObserver.unobserve().
结束对指定 Element 的监听。
二：局部代码示例
// mychart.vue
<template><divref="container"class="idata-multi-y-axis"></div>
</template>
<script lang="ts" setup>
import {onUnmounted,watch,reactive,ref,toRefs,PropType,shallowRef,defineComponent,nextTick,onMounted,
} from 'vue';
import { PageList } from '@/types/smart/report/idata-table';
import { SheetResource, SheetFilter, SheetOrder, SheetStyle } from '@/types/smart/report/report';
import { debounce, cloneDeep, uniq, merge } from 'lodash';
import * as echarts from 'echarts/core';
import {ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,GraphicComponent,TitleComponent,
} from 'echarts/components';
import { BarChart, PieChart, LineChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import 'echarts/lib/component/dataZoom';echarts.use([ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,LabelLayout,BarChart,PieChart,LineChart,GraphicComponent,CanvasRenderer,TitleComponent,
]);const state = reactive({resizeObserve: null as ResizeObserver|null,
})const container = ref(null);const chart = shallowRef(null);onMounted(() => {nextTick(() => {(chart.value as any) = echarts.init(container.value as any);(chart.value as any).setOption(state.option);// 对container.value dom元素的尺寸进行监听，若其尺寸发生改变，则重新渲染统计图if (!state.resizeObserve) {state.resizeObserve = new ResizeObserver((entires) => {for (const entry of entires) {if (entry.target === container.value) {// 此时监听统计图dom尺寸的改变，重载统计图(chart.value as any).resize();}}});}state.resizeObserve.observe(container.value as any);});});onUnmounted(() => {if (!chart.value) {return;}(chart.value as any).dispose();if (container.value) {state.resizeObserve?.unobserve(container.value as any);}});