【Vue】监听div宽高的变化（动态渲染echarts宽高案例）

在Vue中，可以通过监听窗口大小变化来动态更新div的宽度和高度，并且根据新的宽度和高度重绘ECharts图表。以下是一个简单的示例：

<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  data() {
    return {
      myChart: null,
      width: 0,
      height: 0
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.myChart) {
      this.myChart.dispose(); // 清理图表实例
    }
  },
  methods: {
    initChart() {
      this.width = this.$refs.chartContainer.offsetWidth;
      this.height = this.$refs.chartContainer.offsetHeight;
      this.myChart = echarts.init(this.$refs.chartContainer);
      // ... 设置ECharts的option
      this.myChart.setOption({
        // ...
      });
    },
    handleResize() {
      if (this.myChart) {
        this.width = this.$refs.chartContainer.offsetWidth;
        this.height = this.$refs.chartContainer.offsetHeight;
        this.myChart.resize({
          width: this.width,
          height: this.height
        });
      }
    }
  }
};
</script>

在这个示例中，我们监听窗口大小变化，并在handleResize方法中更新图表的大小。我们使用Vue的ref属性来直接访问div元素，并获取其宽度和高度。然后，我们调用ECharts实例的resize方法来更新图表的大小。在组件销毁之前，我们还需要清理事件监听器和ECharts实例，以防止内存泄漏。