react中使用G2图表踩到的坑
·
最近在写有图表的页面，饼图、折线图都有。用的插件是蚂蚁金服下的一款开源可视化的前端组件库G2。
比较好上手，官方文档也写的清清楚楚，只是踩了个小小的坑。
按照官方文档写下来，设置了图表的宽度自适应。然而页面在刚开始刷新的时候，canvas超出了屏幕的宽度，如果改变浏览器的大小，forceFit: true这个属性会自适应屏幕的宽度，这时图表的大小是正常的。
询问大神可能是G2在计算屏幕宽度的时候有偏差，需要手动更新一下。所以需要在componentDidMount这个生命周期函数里加段这样的代码 const e = document.createEvent('Event');
e.initEvent('resize', true, true);
window.dispatchEvent(e);
完美解决。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)