react中使用G2图表踩到的坑

最近在写有图表的页面，饼图、折线图都有。用的插件是蚂蚁金服下的一款开源可视化的前端组件库G2。

比较好上手，官方文档也写的清清楚楚，只是踩了个小小的坑。

按照官方文档写下来，设置了图表的宽度自适应。然而页面在刚开始刷新的时候，canvas超出了屏幕的宽度，如果改变浏览器的大小，forceFit: true这个属性会自适应屏幕的宽度，这时图表的大小是正常的。

询问大神可能是G2在计算屏幕宽度的时候有偏差，需要手动更新一下。所以需要在componentDidMount这个生命周期函数里加段这样的代码    const e = document.createEvent('Event');
                      e.initEvent('resize', true, true);
                      window.dispatchEvent(e);

完美解决。

来源：CSDN

作者：赵又又i

链接：https://blog.csdn.net/weixin_41719836/article/details/83543163