项目前提vue3+typescript并使用set up语法糖的情况下，实现echart的宽高自适应

可以通过监听窗口大小变化，动态修改 Echarts 实例的宽高来实现自适应。

首先，需要在 Vue 组件中引入 Echarts，并创建一个 Echarts 实例：

<template>
  <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    let chartInstance: echarts.ECharts | null = null;

    const initChart = () => {
      if (!chartRef.value) return;
      chartInstance = echarts.init(chartRef.value);
      // 初始化图表配置
      // ...
    };

    // 创建图表实例
    initChart();

    // 监听窗口大小变化，动态修改图表宽高
    watch(
      () => [window.innerWidth, window.innerHeight],
      () => {
        if (chartInstance) {
          chartInstance.resize();
        }
      },
      { immediate: true }
    );

    return {
      chartRef,
    };
  },
});
</script>

在 `initChart` 函数中，可以初始化 Echarts 实例，并对图表进行配置。同时，在组件的 `setup` 函数中，通过 `watch` 监听窗口大小变化，在大小发生变化时，调用 `resize` 方法动态修改图表的宽高。这里使用了 TypeScript 类型，可以提供更好的代码提示和类型检查。

最后，在组件的模板中，通过 `ref` 获取到图表容器，并设置其宽高为 100%，以便自适应父容器大小。