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

可以使用`resize`事件和`setOption`方法结合来实现。

首先，需要在父级div渲染完成后，初始化echarts实例，并且绑定`resize`事件。

mounted() {
  this.initChart();
  window.addEventListener('resize', this.handleResize);
},

然后，在`initChart`方法中，需要创建echarts实例，并且设置option，同时需要记录下父级div的大小。

initChart() {
  this.chart = echarts.init(this.$refs.chart);
  this.chart.setOption(this.option);
  this.chartContainer = this.$refs.chart.parentNode;
  this.handleResize();
},

接下来，实现`handleResize`方法，该方法会在父级div大小改变时被调用。在方法中，需要根据父级div的宽度，重新计算echarts实例的宽度，并且调用`setOption`方法更新图表。

handleResize() {
  const width = this.chartContainer.offsetWidth;
  this.chart.resize({ width });
},

最后，在组件销毁时，需要移除`resize`事件的监听。

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},

完整的代码如下：

<template>
  <div ref="chart" style="height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
      chartContainer: null,
      option: {
        // echarts option
      }
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(this.option);
      this.chartContainer = this.$refs.chart.parentNode;
      this.handleResize();
    },
    handleResize() {
      const width = this.chartContainer.offsetWidth;
      this.chart.resize({ width });
    }
  }
};
</script>