autoFit 第一次变化有 bug

[YY88Xu]

问题描述

如图，容器动态变化，1s 后宽度变为 100px, 但是图表并没有变化

import { Chart } from '@antv/g2';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.interval().data(data).encode('x', 'year').encode('y', 'sales');

chart.render();

setTimeout(()=>{
  const container = document.getElementById('container')
  container.style.width = '100px'
  container.style.border = '1px solid black'
}, 2000)

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

autoFit 不会去监听容器变化事件，如果希望图表跟随容器，可以自己监听容器变化事件，然后调用 chart.forceFit()

[hustcc]

因为 G2 监听的是 window resize 事件，所以修改容器样式之后，手动出发一个 window resize 事件也可以实现。

[YY88Xu]

@pearmini @hustcc 监听的是 window resize 事件有问题，就是容器的宽度是按照百分比给的比如 60%，当用户直接调整浏览器页面大小会触发 resize 没有问题。但是在微前端环境下，左侧菜单有可能会收起来，那么这个时候只是容器改变了大小,图表不会forceFit。
如果设置 autoFit 为 true，自己监听容器大小变化，调用 chart.forceFit() 会进入死循环，页面一直会调用监听容器的函数。手动出发一个 window resize 事件，也是会死循环。

如果监听直接监听容器的大小，自己实现autoFit 为 false。new Chart({ container: eeChartRef.value, autoFit: false }) 怎么给 width 和 height 呢？因为 width 和 height 不支持 100% 这种设置。

[hustcc]

1. 关闭 autoFit
2. 监听容器大小变化，或者容器宽高，可以使用 size-sensor 库
3. 容器变化的时候，调用 chart.changeSize 方法