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

在Vue3中使用ECharts可以通过监听窗口大小变化，然后动态设置图表的大小实现自适应。具体步骤如下：

1. 在Vue组件中引入ECharts并初始化图表：

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart) // 初始化图表
    this.initChart() // 初始化图表数据
    this.resizeChart() // 初始化图表大小
    window.addEventListener('resize', this.resizeChart) // 监听窗口大小变化
  },
  beforeUnmount() {
    this.chart.dispose() // 销毁图表
    window.removeEventListener('resize', this.resizeChart) // 取消监听窗口大小变化
  },
  methods: {
    initChart() {
      // 初始化图表数据
    },
    resizeChart() {
      this.chart.resize() // 动态设置图表大小
    }
  }
}

2. 在模板中定义包含图表的div，并通过ref属性将其与组件中的chart变量绑定：

<template>
  <div ref="chart" class="chart"></div>
</template>

3. 在样式表中定义图表div的大小：

.chart {
  width: 100%;
  height: 100%;
}

这样，当窗口大小变化时，图表会动态调整大小以适应div的大小。