强大的窗口大小变化时，echart图表自适应方法【终极版】

<div ref="chartContainer1" style="width: 100%;" class="chartContainer1"></div>

const chartContainer1 = ref(null);
let chart1 = null;

// 定义函数，用于处理图表自适应，挂在在全局main.js
export function setupChartResponsive(chartInstance, chartContainerRef) {
  const chartDiv = chartContainerRef.value; // 获取chart容器元素
  const chartInnerDiv = chartDiv.querySelector('div'); // 获取chart内部div元素

  // 创建 ResizeObserver 实例，监听chart容器元素的大小变化
  const resizeObserver = new ResizeObserver(() => {
    if (chartInstance && chartInnerDiv) {
      chartInstance.resize(); // 调整图表大小
    }
  });

  // 监听chart容器元素的大小变化
  resizeObserver.observe(chartDiv);

  // 返回函数，用于在组件销毁前停止监听
  return () => {
    resizeObserver.disconnect();
  };
}


const { proxy } = getCurrentInstance();

onMounted(() => {
    chart1 =
      echarts.getInstanceByDom(chartContainer1.value) ||
      echarts.init(chartContainer1.value);
    chart1.setOption(options1.value);

    createWebSocket(wsUrl);

    // 调用函数设置chart1的自适应
    const cleanupChart1 = proxy.setupChartResponsive(chart1, chartContainer1);

    // 在组件销毁前调用cleanupChart1，停止监听chart1的大小变化
    onUnmounted(() => {
      cleanupChart1();
    });
});