问题缘起

后台的一个AntV G2图表在侧边菜单栏收缩或展开后并没有“自适应”新的宽高——虽然设置了autoFit: true

解决1

首先想到的自然而然是针对侧边菜单折叠事件添加一个订阅,并在订阅回调中强制重绘图表。如下:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
this.siderListener = this.commonService.siderCollapsed$.subscribe((collapsed) => { if (this.postChart) { console.log(1, this.postChart.viewBBox.width, this.postChart.viewBBox.height); const chartEle = document.getElementById('countChart'); console.log(2, chartEle?.clientWidth, chartEle?.offsetWidth, chartEle?.scrollWidth); setTimeout(() => this.postChart.forceFit(), 200); } });

然而,输出的结果却是记录的上一次宽高,即便加上了setTimeout(但定时器间隔设久一些,比如>200ms,可以取到更新后的宽高)。

解决2