最近做了一个基于react的可视化的大屏项目,
有一个需求是大屏的下半部分做一个轮播图,一共三页,每一页都由几个echarts图构成,
但是,测试使用ant design组件库里的Carousel走马灯组件和其他一些第三方react轮播图插件库都会出现一个bug:
设置自动轮播autoplay后,最后一页的echarts图全部渲染不出来
找不到bug原因,猜测是因为:
这些走马灯和轮播图插件的实现原理是动态在现有的一组要轮播的页面后,再追加一组,实现持续一个方向的页面滚动。
echarts可能不能在追加的div上渲染
使用react-swipeable-views插件,可以解决这个问题。文档:https://react-swipeable-views.com/api/api/
因为和上面提到的插件的轮播实现原理不同,没有追加div,所以最后一页echarts图可以正常渲染
但也因为实现轮播的原理不同,所以有一个小缺点:最后一页播放结束,会反方向回到第一页,重新轮播。
注:插件需要通过npm 方式引用,如果需要扩展功能,可以把文件里需要的包自行install,改成自定义的组件引用。