vue 中echarts 自适应容器大小

在Vue中使用Echarts实现容器大小自适应有以下几种方法：

1. 使用`watch`监听容器大小变化，手动调用`resize`方法：

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

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.initChart()
  },
  methods: {
    initChart() {
      // 初始化图表
    },
    resize() {
      this.chart.resize()
    }
  },
  watch: {
    '$refs.chart': {
      immediate: true,
      handler() {
        window.addEventListener('resize', this.resize)
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  }
}
</script>

2. 使用`resize-detector`插件自动监听容器大小变化：

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

<script>
import echarts from 'echarts'
import resizeDetector from 'resize-detector'

export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.initChart()

    // 监听容器大小变化
    resizeDetector.addResizeListener(this.$refs.chart, this.resize)
  },
  methods: {
    initChart() {
      // 初始化图表
    },
    resize() {
      this.chart.resize()
    }
  },
  beforeDestroy() {
    resizeDetector.removeResizeListener(this.$refs.chart, this.resize)
  }
}
</script>

3. 使用`vue-echarts`组件库自动监听容器大小变化：

<template>
  <v-chart :options="options"></v-chart>
</template>

<script>
import { VChart } from 'vue-echarts/components'
import 'echarts/lib/chart/bar' // 引入图表类型
import 'echarts/lib/component/tooltip' // 引入图表组件

export default {
  components: {
    VChart
  },
  data() {
    return {
      options: {
        // 图表配置
      }
    }
  }
}
</script>

以上几种方法均可以实现Echarts容器大小自适应，选择哪种方法取决于项目需求和个人喜好。