antv/G2 v4使用遇坑之旅

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

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


render() {
  return <div id="hitogram" ref={this.chartRef} />;
}

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的属性就好。加了此属性，效果如下：

6. 有遇到饼图渲染的时候，变成全黑的情况，如下：

排除了不是数据问题之后，发现原来是forceFit的原因。因为我在pie组件中渲染后面增加了下面这句代码：

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

去除掉这句代码结果就可以了。如下：

7. 柱状图渲染的时候，会发现横轴的末尾会有一段空白。如下图：

可以发现，1的位置是我的数据的最后一个点，但是却有2这段空白距离。百思不得其解。后来一步一步debug，才发现原来是nice这个属性的锅。看官网上对nice的解释：

这样就可以解释的通了。nice就是会在末尾增加一段间距让图表展示起来不那么局促，而一般这用在y轴上，而不是x轴。

更改以下代码即可：

this.chart.scale({
      time: {
        type: 'time', // 声明为 time 类型
        mask: 'MM-DD hh:mm', // 格式化日期
      }
});

注意nice属性不要写在x轴即可。