在vue中使用echarts根据父级div大小自动适应大小

要在Vue中使用ECharts，并根据父级div的大小自动适应大小，可以使用ECharts提供的resize方法和Vue的生命周期函数。

首先，在Vue组件中引入ECharts，并创建一个ECharts实例，如下所示：

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

<script>
import echarts from 'echarts'

export default {
  mounted() {
    // 创建echarts实例
    this.chart = echarts.init(this.$refs.chart)

    // 调用 resize 方法，使图表自适应容器大小
    window.addEventListener('resize', () => {
      this.chart.resize()
    })
  },
  beforeDestroy() {
    // 销毁echarts实例
    this.chart.dispose()
    this.chart = null
  }
}
</script>

在mounted生命周期函数中，创建ECharts实例，并将其挂载到组件的$refs上。然后，通过监听window的resize事件，并调用resize方法，使图表能够根据父级div的大小自适应。

在beforeDestroy生命周期函数中，销毁ECharts实例，释放内存。

最后，在样式中设置父级div的宽高，以便图表能够正确显示。

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