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

可以使用 Vue3 的 `ref` 和 `watch` 来实现 ECharts 图表的宽高自适应。

首先，在模板中定义一个容器元素，用于包裹 ECharts 图表：

<template>
  <div class="chart-wrapper" ref="chartWrapper"></div>
</template>

然后在组件中使用 `ref` 引用该容器元素，并在 `setup` 函数中使用 `watch` 监听容器元素的宽高变化。当容器元素的宽高发生变化时，重新设置 ECharts 图表的容器宽高，并调用 `resize` 方法重新渲染图表。

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

export default defineComponent({
  name: 'EchartsDemo',
  setup() {
    const chartWrapper = ref(null); // 引用容器元素

    // 监听容器宽高变化
    watch(
      () => [chartWrapper.value?.clientWidth, chartWrapper.value?.clientHeight],
      ([width, height]) => {
        if (!width || !height) return;
        // 设置 ECharts 容器宽高
        myChart.resize({ width, height });
      },
      { immediate: true } // 立即执行一次
    );

    let myChart: echarts.ECharts;

    // 在 mounted 钩子中初始化 ECharts 图表
    const mounted = () => {
      myChart = echarts.init(chartWrapper.value);
      // ...
    };

    return { chartWrapper, mounted };
  },
});
</script>

在上述代码中，我们使用了 `immediate: true` 来使 `watch` 立即执行一次，以便在组件挂载时就能正确设置 ECharts 图表的容器宽高。

最后，在 `mounted` 钩子中初始化 ECharts 图表，可以通过 `myChart.setOption` 方法设置图表的数据和配置。