react中使用G2图表踩到的坑

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

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

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

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

完美解决。

你可能感兴趣的:(react中使用G2图表踩到的坑)