让 ECharts 图表跟随容器自动放大缩小

让 ECharts 图表跟随容器自动放大缩小，核心是监听容器尺寸变化事件，并调用 ECharts 实例的 resize() 方法。

关键点

完善窗口 resize 监听：确保窗口大小变化时触发图表重绘。
监听容器自身尺寸变化：如果容器尺寸是动态变化的（如父元素大小改变），需要额外监听容器的尺寸变化。
防抖处理：避免 resize 事件频繁触发导致性能问题。

代码（重点部分）

xml 复制代码

<template>
  <div class="chart-widget">
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// 引入 ResizeObserver 兼容处理（可选，用于监听容器尺寸变化）
import ResizeObserver from "resize-observer-polyfill"; // 若需要兼容旧浏览器，可安装此依赖

export default {
  data() {
    return {
      // 新增：用于存储 resize 事件的防抖计时器和容器观察器
      resizeTimer: null,
      containerObserver: null,
    };
  },

  mounted() {
    this.initCard();//初始化echarts
    // 1. 监听窗口 resize 事件（防抖处理）
    window.addEventListener("resize", this.handleResize);
    // 2. 监听图表容器自身尺寸变化（如父元素大小改变）
    this.observeContainerResize();
  },

  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    // 移除事件监听，避免内存泄漏
    window.removeEventListener("resize", this.handleResize);
    if (this.containerObserver) {
      this.containerObserver.disconnect();
    }
  },

  methods: {
    // 监听容器尺寸变化（核心：支持容器动态缩放）
    observeContainerResize() {
      const container = this.$refs.chartContainer;
      if (!container) return;

      // 使用 ResizeObserver 监听容器尺寸变化
      this.containerObserver = new ResizeObserver(entries => {
        // 防抖处理：50ms 内只执行一次
        if (this.resizeTimer) clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(() => {
          this.chart?.resize(); // 调用 ECharts 重绘方法
        }, 50);
      });

      this.containerObserver.observe(container); // 开始观察容器
    },

    // 处理窗口 resize 事件（防抖）
    handleResize() {
      if (this.resizeTimer) clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chart?.resize(); // 调用 ECharts 重绘方法
      }, 50);
    },
    //你自己的初始化echarts方法
    initCard(){}

  },
};
</script>
<style lang="less" scoped>
.chart-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
  .chart-container {
    min-height: 150px;
    width: 100%;
  }
  }
</style>

实现说明

窗口 resize 监听：

- 通过 window.addEventListener("resize", this.handleResize) 监听浏览器窗口大小变化。
- 用 setTimeout 实现防抖（50ms 内多次触发只执行一次），避免频繁重绘影响性能。

容器尺寸变化监听：

- 使用 ResizeObserver API 直接监听图表容器（chart-container）的尺寸变化，支持容器因父元素布局变化而动态缩放（如侧边栏展开 / 收起、响应式布局切换等）。
- 若需要兼容不支持 ResizeObserver 的旧浏览器（如 IE），可安装 resize-observer-polyfill 依赖（npm install resize-observer-polyfill --save）。

ECharts 重绘：

- 核心是调用 this.chart.resize() 方法，ECharts 会自动根据容器当前尺寸重新计算图表布局。

额外注意事项

确保图表容器（chart-container）的父元素有明确的尺寸约束（如 width: 100%; height: 100%;），否则容器可能无法随父元素缩放。
若图表在弹窗、tabs 等动态显示的组件中，需在组件显示后手动调用 this.updateChart() 或 this.chart.resize()，避免因初始隐藏导致的尺寸异常。

通过以上修改，你的 ECharts 图表会自动跟随容器和窗口的尺寸变化而自适应缩放。