antv/G2 v4使用遇坑之旅

1. 当container中指定是这个容器的id名时，如果要复用这个组件，那么会在当前id下创建多个一样的图表组件，且样式会乱掉。因为指明了当前id. 解决方案：改用refs去指定即可。

this.chart = new Chart({
   container: this.chartRef.current,
   autoFit: true,
   height: 220,
});


render() {
  return 
;
}

2. 当你所使用的图表外侧包裹的容器使用了flex布局，会出现，图表不会自适应屏幕大小，会导致溢出。解决方案：使用百分比布局，不使用flex布局，另外需要延时调用forceFit()方法即可。若你发现遇到纵坐标轴会遮挡的情况，可以使用下面这个方法强制自适应。

setTimeout(() => {
  this.chart.forceFit();
}, 0);

3. 当使用了标注线，annotation的时候。在数据更新的时候，上一次的annotation仍然存在，导致会有很多重叠数据。解决方案：需要在绘制标注线之前，先清除标注线。

this.chart.annotation().clear(true);

4. 关闭横轴的label坐标轴的文字的自动旋转功能。由于x轴的自动旋转，文字很大概率会被遮挡，体验很差，所以加上此属性可以规避。

this.chart.axis('time', {
  label: {
     autoRotate: false, // 关闭自动旋转功能
  }
})

5. 当希望展现柱状图中每个柱子的间距很小，且柱子比较紧密。一开始使用了minColumnWidth， maxColumnWidth。使用了柱子的最小宽及最大宽。但这种情况，会有柱子重叠的情况，如下：

那么如何将柱子与柱子分隔开，且相对来说比较紧密。解决方案如下：

registerTheme('hitogramlineTheme', {
   columnWidthRatio: 0.75
});

this.chart = new Chart({
   container: 'hitogramline',
   autoFit: true,
   height: 220,
});
this.chart.theme('hitogramlineTheme');

更改columnWidthRatio的属性即可。这是主题属性。以往3的版本是G2.Global.widthRatio.column = 0.75; 现在已经废弃了G2.Global方法。统一使用主题的columnWidthRatio的属性就好。加了此属性，效果如下：