vue3中使用echarts怎么使图表自适应div大小

在Vue3中使用Echarts，并让图表自适应div大小，你可以通过在mounted钩子函数中，使用`this.$nextTick()`来确保Echarts图表渲染完成。然后，你需要监听div大小的变化，当div大小发生变化时，重新渲染Echarts图表。

以下是示例代码：

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

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

export default {
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.chart.setOption({...}); // 设置你的Echarts选项
      this.handleResize(); // 初始化时，调整图表大小
    },
    handleResize() {
      this.chart.resize(); // 调整图表大小
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

通过以上方法，你可以在Vue3中使用Echarts，并让图表自适应div的大小。