简介

本文章主题是用 AntG2 4.x 的changeSize(width, height)和 5.x的 resize() 分别实现图表自适应。

AntV G2 是一款强大的数据可视化库，可用于在 Vue 应用程序中创建交互式图表。

首先安装antG2

## AntG2 4.x版本 
npm install @antv/g2@4.x --save

## AntG2 5.x版本 
npm install @antv/g2@5.x --save

使用antG2时注意：

// ❌ G2 4.x 及以上不支持这种写法
chart.interval().data(data).position(...)

// ✅ G2 4.x 正确写法
chart.data(data); // 数据绑定到图表实例
chart.interval().position(...); // 图形标记只负责配置映射关系

AntG2中 修改图表尺寸的方法

版本	方法	作用	底层逻辑	适用场景
4.x	changeSize(width, height)	主动修改图表尺寸	绕过容器尺寸检测，强制图表使用指定尺寸；无尺寸缓存问题，修改后立即生效	绝大多数场景（推荐）
4.x	resize()	自适应容器尺寸	存在严重的尺寸缓存，仅初始化时读取一次容器尺寸	仅简单静态场景
5.x	resize()	自适应容器尺寸	重构了尺寸计算逻辑，支持动态感知	所有场景（推荐）
5.x	无 changeSize ()	-	功能合并到 resize () 中	-

4.x版本：

1. resize()：G2 4.x 版设计上存在局限性，不会主动读取容器的最新尺寸，仅能基于图表当前配置的尺寸重新计算布局。如果容器大小已变化，但未更新图表配置，调用 resize() 不会有任何效果（这也是之前代码中图表不适应的核心原因）。
2. changeSize(width, height)：是 G2 4.x 中 修改尺寸的专用方法，必须显式传入新的宽高值。调用后会直接更新图表的 options.width 和 options.height，并触发重新渲染，能真正改变图表的实际大小。

5.x版本：

1. resize()：G2 5.x 版本对该方法进行了彻底重构，成为尺寸调整的核心方法。调用后会主动读取容器的最新尺寸（无论容器尺寸是通过像素、百分比还是动态计算定义），并基于新尺寸重新计算布局和渲染图表。
2. 5.x 中无 changeSize () 方法：原 4.x 中 changeSize (width, height) 的功能已完全整合到 resize () 中。

图表自适应 G2 4.x 版

• 采用了ResizeObserver监听+手动尺寸控制的混合方案来实现图表自适应，主要依赖AntG2 4.x的changeSize()方法作为核心尺寸调整手段。

1. ResizeObserver 直接监听图表容器元素
2. 尺寸变化时调用 chart.changeSize() 方法进行增量更新
3. 可响应容器内部尺寸变化（如容器CSS类变化）

核心实现原理：

1. 主动尺寸控制

• • 组件通过containerWidth和containerHeight状态变量主动控制图表容器的CSS尺寸
  • 在图表初始化和尺寸变化时，明确传递像素级别的宽高值给G2图表实例
  • 设置autoFit: false禁用G2内置的自动适配功能，完全接管尺寸控制

1. ResizeObserver监听机制

• • 创建ResizeObserver实例监听容器元素尺寸变化
  • 当容器尺寸改变时触发回调，执行图表尺寸调整

1. AntG2 4.x核心方法

• • 使用chart.changeSize(width, height)方法作为图表尺寸调整的核心API
  • 这是G2 4.x版本专门用于手动修改图表尺寸的方法
  • 同时更新chart.options中的宽高配置并重新渲染

<template>
  <div class="demo-container">
    <div class="controls">
      <button @click="toggleContainer" class="btn">切换容器大小</button>
    </div>

    <!-- 图表容器 -->
    <div 
      ref="chartContainer" 
      class="chart-container"
      :style="{
        width: containerWidth,
        height: containerHeight,
        transition: 'all 0.5s ease',
        border: '1px solid #ccc'
      }"
    ></div>

    <div class="debug-info">
      <p>容器尺寸: {{ containerWidth }} × {{ containerHeight }}</p>
      <p>实时尺寸: {{ currentWidth }}px × {{ currentHeight }}px</p>
    </div>
  </div>
</template>

<script setup>
import { Chart } from '@antv/g2'; // AntG2 4.x 引入方式
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

//  容器状态管理
const chartContainer = ref(null);
const containerWidth = ref('100%'); // 初始宽度（百分比）
const containerHeight = ref('400px'); // 初始高度
const isLarge = ref(true); // 控制容器大小切换
const currentWidth = ref(0); // 实时容器宽度
const currentHeight = ref(0); // 实时容器高度

//  图表固定数据集
const chartData = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

let chart = null;
let resizeObserver = null; // 用于监听容器尺寸变化的观察者

// 创建图表
const createChart = (width, height) => {
  // 销毁旧图表，避免DOM残留和尺寸缓存
  if (chart) chart.destroy();

  // 初始化图表实例（autoFit: false 手动控制尺寸）
  chart = new Chart({
    container: chartContainer.value,
    width: width,
    height: height,
    autoFit: false
  });

  // 图表配置
  chart.data(chartData);
  chart.interval() // 柱状图类型
    .position('genre*sold') // X轴：genre，Y轴：sold
    .color('genre'); // 按 genre 字段区分颜色
  
  chart.render(); // 渲染图表
};

// 调整图表尺寸
const adjustChartSize = () => {
  if (!chartContainer.value || !chart) return;

  // 获取容器最新的实际像素尺寸
  const { clientWidth, clientHeight } = chartContainer.value;
  currentWidth.value = clientWidth;
  currentHeight.value = clientHeight;

  // 用 changeSize 显式修改尺寸
  chart.changeSize(clientWidth, clientHeight); 
  chart.render();

  const canvas = chartContainer.value.querySelector('.g2-canvas');
  if (canvas) {
    canvas.style.width = `${clientWidth}px`;
    canvas.style.height = `${clientHeight}px`;
  }
};

//AntG2 4.x 无自动监听，需用 ResizeObserver 实现
const setupResizeObserver = () => {
  // 创建观察者实例：容器尺寸变化时触发调整
  resizeObserver = new ResizeObserver(entries => {
    if (entries[0]) { // 确保获取到容器尺寸变化信息
      adjustChartSize();
    }
  });

  // 启动监听：观察图表容器的尺寸变化
  if (chartContainer.value) {
    resizeObserver.observe(chartContainer.value);
  }
};

// 切换容器大小
const toggleContainer = () => {
  isLarge.value = !isLarge.value;
  if (isLarge.value) {
    containerWidth.value = '100%';
    containerHeight.value = '400px';
  } else {
    containerWidth.value = '70%';
    containerHeight.value = '300px';
  }
  // 无需手动调用 adjustChartSize：ResizeObserver 会自动监听容器变化并触发调整
};

// 初始化（页面加载时创建图表+启动监听）
onMounted(async () => {
  await nextTick(); // 等待DOM完全挂载
  // 获取初始尺寸并创建图表
  const { clientWidth, clientHeight } = chartContainer.value;
  currentWidth.value = clientWidth;
  currentHeight.value = clientHeight;
  createChart(clientWidth, clientHeight);
  
  // 启动尺寸观察者（监听容器切换和窗口缩放）
  setupResizeObserver();

  // 额外监听窗口缩放
  window.addEventListener('resize', adjustChartSize);
});

// 页面卸载时销毁图表和监听
onUnmounted(() => {
  if (chart) chart.destroy();
  if (resizeObserver) resizeObserver.disconnect(); // 停止尺寸观察
  window.removeEventListener('resize', adjustChartSize); // 移除窗口监听
});
</script>

<style scoped>
.demo-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto; 
}

.controls {
  margin-bottom: 15px;
  display: flex;
  gap: 10px; 
}

.btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background: #096dd9; 
}

.chart-container {
  margin-bottom: 15px;
  background: #fff; 
}

.debug-info {
  padding: 10px;
  background: #f5f5f5;
  font-size: 14px;
  border-radius: 4px;
  color: #666; 
}
</style>

核心流程讲解

1. 尺寸调整流程 (adjustChartSize函数)

const adjustChartSize = () => {
  // 1. 获取最新容器尺寸
 const adjustChartSize = () => {
  if (!chartContainer.value || !chart) return;

  // 获取容器最新的实际像素尺寸
  const { clientWidth, clientHeight } = chartContainer.value;
  currentWidth.value = clientWidth;
  currentHeight.value = clientHeight;

  // 用 changeSize 显式修改尺寸
  chart.changeSize(clientWidth, clientHeight); 
  chart.render();

  const canvas = chartContainer.value.querySelector('.g2-canvas');
  if (canvas) {
    canvas.style.width = `${clientWidth}px`;
    canvas.style.height = `${clientHeight}px`;
  }
};

1. 容器大小切换

• • 点击"切换容器大小"按钮时，仅更新containerWidth和containerHeight状态
  • ResizeObserver检测到容器尺寸变化后自动触发adjustChartSize

//AntG2 4.x 无自动监听，需用 ResizeObserver 实现
const setupResizeObserver = () => {
  // 创建观察者实例：容器尺寸变化时触发调整
  resizeObserver = new ResizeObserver(entries => {
    if (entries[0]) { // 确保获取到容器尺寸变化信息
      adjustChartSize();
    }
  });

  // 启动监听：观察图表容器的尺寸变化
  if (chartContainer.value) {
    resizeObserver.observe(chartContainer.value);
  }
};

// 切换容器大小
const toggleContainer = () => {
  isLarge.value = !isLarge.value;
  if (isLarge.value) {
    containerWidth.value = '100%';
    containerHeight.value = '400px';
  } else {
    containerWidth.value = '70%';
    containerHeight.value = '300px';
  }
  // 无需手动调用 adjustChartSize：ResizeObserver 会自动监听容器变化并触发调整
};

实现效果

点击切换容器大小，图表自适应；改变浏览器窗口大小，图表自适应

图表自适应 G2 5.x 版

G2 5.x 对尺寸调整做了优化，resize()+ autoFit: true方法自动读取容器尺寸，无需手动传入参数

本人想实现和4.x一样的效果，但是只切换容器大小图表无法实现自适应，必须切换容器大小后再改变浏览器窗口大小才能适应。怀疑是resize()内置的写法主要监控的浏览器窗口导致的容器尺寸变化，而且开了autoFit: true无法由组件长度变量来主动接管尺寸控制。所以手动强硬切换容器大小无法实现图表自适应。而且平时图表自适应的也就是浏览器窗口大小变化下的图表自适应，所以也没必要给自己做一个手动切换容器大小的无用设置

错误实现：

点击切换容器大小，容器变小但是图表不变所以图表被遮盖住。当改变浏览器窗口大小时，才开始适应容器大小。

正确实现：直接去掉手动切换容器大小

<template>
  <div class="demo-container">
    <!-- 栅格容器 -->
    <div class="chart-grid">
      <!-- 图表容器 -->
      <div 
        ref="chartContainer1" 
        class="chart-item"
        :style="{
          height: `${containerHeight}px`,
          transition: 'all 0.5s ease',
          border: '1px solid #ccc',
          minWidth: 0 // 允许容器宽度小于内容宽度
        }"
      ></div>
      <div 
        ref="chartContainer2" 
        class="chart-item"
        :style="{
          height: `${containerHeight}px`,
          transition: 'all 0.5s ease',
          border: '1px solid #ccc',
          minWidth: 0
        }"
      ></div>
    </div>

    <div class="debug-info">
      <p>图表1实时尺寸: 宽 {{ chart1Width }}px × 高 {{ containerHeight }}px</p>
      <p>图表2实时尺寸: 宽 {{ chart2Width }}px × 高 {{ containerHeight }}px</p>
      <p>栅格容器实时宽度: {{ gridContainerWidth }}px</p> 
    </div>
  </div>
</template>

<script setup>
import { Chart } from '@antv/g2';
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

const chartContainer1 = ref(null);
const chartContainer2 = ref(null);
const containerHeight = ref(400);
const chart1Width = ref(0);
const chart2Width = ref(0);
const gridContainerWidth = ref(0); // 监控栅格容器宽度，便于排查
let chart1 = null;
let chart2 = null;
let resizeObserver = null;

// 图表数据
const chartData1 = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
  { genre: 'Puzzle', sold: 220 },
  { genre: 'Adventure', sold: 180 },
  { genre: 'RPG', sold: 320 },
];
const chartData2 = [
  { month: '1月', sales: 120 },
  { month: '2月', sales: 190 },
  { month: '3月', sales: 150 },
  { month: '4月', sales: 250 },
  { month: '5月', sales: 180 },
  { month: '6月', sales: 300 },
  { month: '7月', sales: 220 },
  { month: '8月', sales: 280 },
];

// 创建图表
const createChart1 = () => {
  if (chart1) chart1.destroy();
  chart1 = new Chart({
    container: chartContainer1.value,
    height: containerHeight.value,
    autoFit: true, // G2 自动适配容器宽度
    padding: [20, 20, 40, 40] 
  });
  chart1
    .interval()
    .data(chartData1)
    .encode('x', 'genre', { 
      label: { style: { rotate: -45, whiteSpace: 'nowrap' } }, 
      tickCount: 8 
    })
    .encode('y', 'sold', { title: '销量（份）' })
    .encode('color', 'genre', { legend: { position: 'bottom', wrap: true } }) // 图例自动换行
    .style('stroke', '#fff', 'strokeWidth', 1);
  chart1.render();
};

const createChart2 = () => {
  if (chart2) chart2.destroy();
  chart2 = new Chart({
    container: chartContainer2.value,
    height: containerHeight.value,
    autoFit: true,
    padding: [20, 20, 40, 40]
  });
  chart2
    .interval()
    .data(chartData2)
    .encode('x', 'month', { label: { style: { whiteSpace: 'nowrap' } } })
    .encode('y', 'sales', { title: '销量（万元）' })
    .encode('color', 'month', { legend: { position: 'bottom', wrap: true } })
    .style('stroke', '#fff', 'strokeWidth', 1);
  chart2.render();
};

// 同步尺寸+监控栅格宽度
const syncChartSizes = () => {
  const gridContainer = document.querySelector('.chart-grid');
  if (!gridContainer || !chartContainer1.value || !chartContainer2.value) return;
  
  // 先更新栅格容器宽度（确认父容器是否缩小）
  gridContainerWidth.value = gridContainer.clientWidth;
  
  // 强制图表容器跟随栅格缩小
  const itemWidth = Math.floor((gridContainerWidth.value - 20) / 2); // 减去gap，均分宽度
  chartContainer1.value.style.width = `${itemWidth}px`;
  chartContainer2.value.style.width = `${itemWidth}px`;
  
  // 适配新尺寸
  chart1?.resize();
  chart2?.resize();
  
  // 更新
  chart1Width.value = chartContainer1.value.clientWidth;
  chart2Width.value = chartContainer2.value.clientWidth;
};

// 监听栅格容器+窗口+延迟触发（解决浏览器渲染延迟）
const setupResizeListeners = () => {
  const gridContainer = document.querySelector('.chart-grid');
  if (!gridContainer) return;

  // 监听栅格容器变化（加延迟
  resizeObserver = new ResizeObserver(() => {
    requestAnimationFrame(syncChartSizes); // 等待浏览器渲染完成后再同步
  });
  resizeObserver.observe(gridContainer);

  // 监听窗口缩放（加防抖
  let resizeTimer = null;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(syncChartSizes, 100); // 100ms防抖，提升性能
  });
};

// 初始化
onMounted(async () => {
  await nextTick();
  createChart1();
  createChart2();
  setupResizeListeners();
  syncChartSizes(); // 初始同步
});

// 清理
onUnmounted(() => {
  chart1?.destroy();
  chart2?.destroy();
  resizeObserver?.disconnect();
  window.removeEventListener('resize', () => {});
});
</script>

<style scoped>
.demo-container {
  padding: 20px;
  width: 100%; 
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box; 
}

.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box; 
  overflow: hidden; 
}

.chart-item {
  width: 100%;
  background: #fff;
  box-sizing: border-box; 
}

.debug-info {
  padding: 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 14px;
  color: #666;
  text-align: center;
}
</style>

核心实现原理

像素宽度精确控制+ResizeObserver监听+AntG2 5.x原生自适应能力 实现图表自适应，主要基于以下技术原理：

1. AntG2 5.x 自适应机制

• • 利用了 AntG2 5.x 的 autoFit: true 配置和 chart.resize() 方法作为核心自适应手段
  • autoFit: true 使图表能够自动计算并适配容器宽度
  • chart.resize() 方法用于在容器尺寸变化后触发图表重新布局

1. 手动像素级宽度控制策略

• • 通过 JavaScript 精确计算每个图表容器的像素宽度 (itemWidth = Math.floor((gridContainerWidth.value - 20) / 2))
  • 使用 .style.width =${itemWidth}px`` 强制设置图表容器宽度，避免内容撑大容器
  • 栅格布局中为图表容器添加 minWidth: 0 解决 Flex/Grid 布局下无法缩小的问题

1. 多重监听机制

• • 使用 ResizeObserver 监听栅格容器 (chart-grid) 的尺寸变化
  • 结合 requestAnimationFrame 等待浏览器渲染完成后再同步尺寸
  • 为窗口 resize 事件添加 100ms 防抖处理，提升性能

核心流程讲解

1. 像素宽度精确控制

const syncChartSizes = () => {
  const gridContainer = document.querySelector('.chart-grid');
  if (!gridContainer || !chartContainer1.value || !chartContainer2.value) return;

  // 1. 获取栅格容器宽度
  gridContainerWidth.value = gridContainer.clientWidth;

  // 2. 精确计算并设置每个图表容器宽度
  const itemWidth = Math.floor((gridContainerWidth.value - 20) / 2); // 减去gap，均分宽度
  chartContainer1.value.style.width = `${itemWidth}px`;  // 核心：精确像素控制
  chartContainer2.value.style.width = `${itemWidth}px`;

  // ...其他代码
};

• 通过 JavaScript 精确计算每个图表容器的像素级宽度
• 使用 Math.floor() 确保宽度为整数像素，避免渲染模糊
• 考虑栅格布局的 gap (20px)，确保两个图表能完美并排显示
• 使用内联样式直接设置宽度，覆盖 CSS 默认行为

2. ResizeObserver监听

const setupResizeListeners = () => {
  const gridContainer = document.querySelector('.chart-grid');
  if (!gridContainer) return;

  // 1. 监听栅格容器变化
  resizeObserver = new ResizeObserver(() => {
    requestAnimationFrame(syncChartSizes); // 等待浏览器渲染完成
  });
  resizeObserver.observe(gridContainer);

  // 2. 监听窗口缩放（加防抖）
  let resizeTimer = null;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(syncChartSizes, 100); // 100ms防抖
  });
};

• 使用 ResizeObserver API 监听栅格容器的尺寸变化
• 结合 requestAnimationFrame 确保在浏览器下一次重绘前执行同步操作
• 为窗口 resize 事件添加防抖处理（100ms），避免频繁触发导致性能问题
• 在组件卸载时清理监听器，防止内存泄漏

3. AntG2 5.x原生自适应能力

// 创建图表函数中的配置
chart1 = new Chart({
  container: chartContainer1.value,
  height: containerHeight.value,
  autoFit: true, // 核心：启用G2原生自适应
  padding: [20, 20, 40, 40]
});

// 同步尺寸函数中的调用
chart1?.resize();  // 核心：触发G2图表重新布局
chart2?.resize();

• 通过 autoFit: true 配置让 AntG2 图表实例具备自动计算宽度的能力
• 调用 chart.resize() 方法时，G2 会根据容器当前尺寸重新计算图表布局
• 自动调整内部元素（坐标轴、图例、数据标签等）的大小和位置

为什么不能只用autoFit自适应

即使 AntG2 5.x 提供了 autoFit: true 配置，仍需要像素宽度精确控制和 ResizeObserver 监听的原因如下：

1. 解决复杂布局问题

• • 在 Grid 或 Flex 布局中，默认情况下子元素可能无法正确缩小（尤其是内容较多时）
  • 添加 minWidth: 0 和像素级宽度控制可以强制容器适应父元素尺寸
  • 代码中的 .chart-grid { overflow: hidden; } 也是为了防止内容撑大容器

1. 提高响应精度

• • AntG2 的 autoFit 并不能监听所有尺寸变化场景（如父容器尺寸变化但窗口未变化）
  • ResizeObserver 可以捕获到更多的尺寸变化场景，包括动态添加/删除内容、CSS 动画等
  • 代码中的 resizeObserver.observe(gridContainer) 直接监听栅格容器变化

1. 确保多图表布局一致性

• • 在多图表并排的场景下，需要精确控制每个图表的宽度，确保它们完美平分空间
  • const itemWidth = Math.floor((gridContainerWidth.value - 20) / 2) 确保了两个图表宽度完全相等
  • 如果仅依赖 autoFit，可能会因为图表内容不同导致宽度略有差异

实现效果

总结

两种实现方案的核心原理

1. AntG2 4.x ：

• • 核心策略：ResizeObserver监听 + 手动尺寸控制 + changeSize()方法
  • 关键API：chart.changeSize(width, height)方法
  • 实现特点：主要依靠手动计算尺寸并传递给图表实例进行更新

1. AntG2 5.x ：

• • 核心策略：像素宽度精确控制 + ResizeObserver监听 + AntG2 5.x原生自适应能力
  • 关键API：autoFit: true配置、chart.resize()方法
  • 实现特点：结合精确像素计算和G2原生自适应能力，通过ResizeObserver捕获尺寸变化

两种方案共同点及对比

一、共同点

1. 尺寸变化感知机制

• • 两者均使用 ResizeObserver API 监听容器尺寸变化
  • 都针对窗口 resize 事件添加了防抖处理，优化性能
  • 都考虑了浏览器渲染延迟问题（5.x使用requestAnimationFrame，4.x使用防抖）

1. 手动干预思想

• • 两者都不单纯依赖框架的自动适配，而是结合手动计算和控制
  • 都包含对容器宽度的精确计算逻辑
  • 都需要主动触发图表尺寸更新（5.x调用resize()，4.x调用changeSize()）

二、对比

对比维度	AntG2 5.x 方案	AntG2 4.x 方案
核心控制策略	混合策略：精确像素控制 + 框架原生自适应	主动控制：完全依赖手动计算并设置尺寸
关键 API	autoFit: true+ chart.resize()	chart.changeSize(width, height)
尺寸传递方式	隐式：通过设置容器宽度，G2 内部自动计算	显式：直接传递具体的width和height值
图表实例处理	尺寸变化时保持实例，只更新布局	尺寸变化时可能需要重建实例或更新尺寸
配置灵活性	更高，可结合 G2 原生配置和自定义逻辑	较低，主要依赖手动实现的逻辑
布局适配能力	更强，G2 5.x 对现代布局（Grid/Flex）支持更好	较弱，需要更多手动处理布局边缘情况

// AntG2 4.x 核心实现片段
const syncChartSizes = () => {
  // 1. 计算图表宽度
  const chartWidth = calculateChartWidth();
  // 2. 直接调用changeSize设置尺寸
  chart.changeSize(chartWidth, chartHeight);
};


// AntG2 5.x 核心实现片段
const syncChartSizes = () => {
  // 1. 计算容器宽度
  const itemWidth = Math.floor((gridContainerWidth.value - 20) / 2);
  // 2. 设置容器宽度
  chartContainer1.value.style.width = `${itemWidth}px`;
  // 3. 调用G2原生resize()
  chart1?.resize();
};

总结

• AntG2 5.x 方案更适合需要精确布局控制且追求开发效率的场景，结合了框架原生能力和手动控制的优点
• AntG2 4.x 方案更适合对图表尺寸有完全控制权的场景，但实现复杂度更高
• 两种方案的核心思想都是通过精确感知尺寸变化，并结合适当的延迟和防抖机制，实现平滑、高性能的图表自适应
• 实际使用时，应根据项目需求、技术栈和性能要求选择合适的方案，并注意相应的优化和兼容性处理

无论选择哪种方案，关键是要理解图表自适应的核心原理：准确感知尺寸变化、精确计算目标尺寸、适时触发图表更新。也就是需要 "监听容器尺寸变化"（通过 ResizeObserver 或窗口事件），再结合对应版本的尺寸调整方法（4.x 用 changeSize，5.x+ 用 resize）。

❥(^_-) 制作不易，希望能留下你的足迹，感谢~