需求开发背景:
【员工技能】展示每个员工的姓名和技能雷达图,一屏只展示俩个员工。并且高度等分自适应大屏。页面要无缝滚动
开发遇到的问题
1.在滚动中。无缝滚动的echart技能图会延迟展示出现
2.试着文档setTimeOut 延迟echart.init图表,发现不会延迟了。但是在无缝滚动中。在无缝滚动的重复图表移上去并没有echart事件,技能图没有展示Tootlip,但距离一会儿又可以了
排查分析问题
-
vue-seamless-scroll的coyHtml是复制solt的innerHtml,因此延迟展示在你没有渲染时已经是复制好的dom节点了
-
在向上滚动的过程中实际上动画在向上滚动距离,渲染的dom依旧存在问题。并没有echart事件。是因为复制solt的innerHtml导致。
-
为什么一会儿又可以。在控制器看到是动画在滚动中以前的dom又开始回滚了。在肉身上以为是复制的dom,实际上已经是之前渲染的dom
解决问题
这里因为业务需求时间紧,直接组件当业务组件去开发
通过这些改动vue-seamless-scroll组件echart 图表渲染没有任何问题。唯一有问题就是当你的数据过多时。这时候可能会有性能问题