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

Vue3是一种流行的JavaScript框架，它允许您构建交互式Web应用程序。而ECharts是一款开源的可视化库，可以提供动态的图表，使Web应用程序变得更加生动和具有吸引力。对于Vue3中使用ECharts来说，当我们的图表需要自适应div大小时，我们可以采用如下的步骤来进行实现：

首先，我们需要在Vue3项目中安装ECharts库。可以使用npm或yarn等方式进行安装，例如：

`npm install echarts`

`yarn add echarts`

然后我们需要将ECharts图表放入一个容器中，这个容器就是我们要自适应大小的div。我们可以使用Vue3的计算属性来监测这个div的大小变化。如下代码：

<template>
  <div ref="chartContainer" :style="`width: ${containerWidth}px;height:${containerHeight}px`"></div>
</template>

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

export default {
  data() {
    return {
      containerWidth: 0,
      containerHeight: 0,
      chart: null
    };
  },
  computed: {
    chartContainer() {
      return this.$refs.chartContainer;
    }
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.resize();
      } else {
        this.chart = echarts.init(this.chartContainer);
        this.chart.setOption(this.chartOption);
      }
    }
  },
  watch: {
    chartOption: {
      handler() {
        this.initChart();
      },
      deep: true
    }
  },
  mounted() {
    this.containerWidth = this.chartContainer.offsetWidth;
    this.containerHeight = this.chartContainer.offsetHeight;
    this.initChart();
    window.addEventListener('resize', () => {
      this.containerWidth = this.chartContainer.offsetWidth;
      this.containerHeight = this.chartContainer.offsetHeight;
      this.chart.resize();
    });
  }
};
</script>

这个例子中，我们使用了Vue3的响应式数据，监测了div容器的大小变化。在div容器挂载到DOM树上之后，我们会调用initChart()方法来初始化ECharts图表。在调整大小时，我们会调用chart.resize()方法重新渲染图表。

总体而言，使用这种方法可以使我们的ECharts图表很好地适应不同大小的div容器，并可以自动适应大小。