在vue3里使用echarts咋能自适应布局

在Vue 3中使用Echarts可以通过以下几个步骤实现自适应布局：

1. 在mounted钩子函数中获取Echarts实例，并将它保存在一个变量中。

2. 在窗口大小发生改变时，调用Echarts实例的resize方法，重新渲染图表，实现自适应布局。

3. 在组件销毁时，需要销毁Echarts实例，避免出现内存泄漏的问题。

下面是一个示例代码：

<template>
  <div ref="chartContainer" :style="{height: chartHeight}"></div>
</template>

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

export default {
  data() {
    return {
      chart: null,
      chartHeight: '300px'
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer);
    this.chart.setOption({...}); // 设置图表数据
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.chart.resize();
    }
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
    this.chart.dispose();
  }
}
</script>

在上面的代码中，我们将图表容器的高度设置为一个响应式的变量`chartHeight`，然后在mounted钩子函数中获取Echarts实例，并将其保存在变量`chart`中。在窗口大小发生改变时，我们调用`handleResize`方法，该方法调用Echarts实例的`resize`方法，重新渲染图表，实现自适应布局。最后，在组件销毁时，我们需要将事件监听器和Echarts实例销毁，避免出现内存泄漏的问题。