vue3的echarts怎么让他自适应div

要让 echarts 自适应 div，可以使用 echarts 的 resize() 方法。具体实现步骤如下：

1. 在 vue3 组件中引入 echarts，并创建 echarts 实例。

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null
    }
  },
  
  mounted() {
    this.chart = echarts.init(document.getElementById('chart'))
  }
}

2. 在组件中添加 resize 方法，并调用 echarts 的 resize() 方法。

export default {
  // ...

  methods: {
    resize() {
      this.chart.resize()
    }
  }
}

3. 在组件的模板中，给 echarts 所在的 div 添加一个 ref 属性，并监听 div 的大小变化，调用 resize 方法。

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

<script>
export default {
  // ...

  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    window.addEventListener('resize', this.resize)
  },

  beforeUnmount() {
    window.removeEventListener('resize', this.resize)
  },

  methods: {
    resize() {
      this.chart.resize()
    }
  }
}
</script>

这样，当 div 的大小变化时，echarts 就会自适应变化并重新绘制图表。