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

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

1. 安装echarts

在项目中安装echarts依赖，可以使用npm或yarn进行安装。

npm install echarts --save

2. 引入echarts

在需要使用echarts的组件中引入echarts。

import echarts from 'echarts'

3. 创建echarts实例

在组件中创建一个echarts实例，设置option并渲染图表。

export default {
  data() {
    return {
      chart: null, // echarts实例
      option: { // 图表配置项
        ...
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chartContainer = document.getElementById('chart-container')
      this.chart = echarts.init(chartContainer)
      this.chart.setOption(this.option)
    }
  }
}

4. 监听窗口大小变化

通过监听窗口大小变化，可以在父级div大小改变时重新渲染图表。

mounted() {
  this.initChart()
  window.addEventListener('resize', this.resizeHandler)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeHandler)
},
methods: {
  resizeHandler() {
    this.chart.resize()
  }
}

5. 设置父级div大小

最后，需要在父级div上设置宽度和高度，并且使用CSS的百分比单位，以便在窗口大小变化时自动适应大小。

<template>
  <div id="chart-container" style="width: 100%; height: 100%;"></div>
</template>

<style scoped>
#chart-container {
  width: 100%;
  height: 100%;
}
</style>