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

在 Vue 中使用 Echarts 根据父级 div 大小自动适应大小，可以通过以下步骤实现：

1. 在 Vue 组件中引入 Echarts：

import echarts from 'echarts'

2. 在 mounted 钩子函数中配置 Echarts 实例：

mounted() {
  // 获取父级 div 的 DOM 对象
  const parentDom = this.$refs.parentDiv
  // 创建 Echarts 实例
  const myChart = echarts.init(parentDom)
  // 配置 Echarts 实例
  myChart.setOption({...})
}

3. 在父级 div 上绑定 ref，方便在组件中获取该 DOM 对象：

<div ref="parentDiv"></div>

4. 在组件的 resized 钩子函数中监听父级 div 大小的变化，并且调用 Echarts 实例的 resize 方法重新渲染：

resized() {
  const myChart = echarts.getInstanceByDom(this.$refs.parentDiv)
  myChart.resize()
}

5. 最后，在组件的 destroyed 钩子函数中销毁 Echarts 实例：

destroyed() {
  const myChart = echarts.getInstanceByDom(this.$refs.parentDiv)
  myChart.dispose()
}

通过以上步骤，就可以在 Vue 中实现 Echarts 的自适应大小。