在vue3中使用echarts根据父级div大小自动适应大小

在Vue3中，可以使用`ref`来获取父级`div`的大小，并将其传递给`echarts`实例的`resize`方法，实现自适应大小的效果。

示例代码如下：

<template>
  <div ref="chart" style="height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    window.addEventListener('resize', () => {
      chart.resize();
    });
  }
}
</script>

在上面的代码中，我们首先通过`ref`获取了父级`div`的引用，然后在`mounted`钩子函数中创建了`echarts`实例并将其挂载到父级`div`上。接着，我们添加了一个`resize`事件监听器，在窗口大小发生变化时调用`chart.resize()`方法，让`echarts`实例自适应父级`div`的大小。

需要注意的是，为了让`echarts`实例能够正确地计算父级`div`的大小，我们需要在父级`div`上设置一个固定的高度。