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>
  <div
    ref="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);
      }
    });