vue-seamless-scroll组件echart 图表渲染延迟并无效问题

256 阅读1分钟

需求开发背景:

 【员工技能】展示每个员工的姓名和技能雷达图,一屏只展示俩个员工。并且高度等分自适应大屏。页面要无缝滚动

开发遇到的问题

1.在滚动中。无缝滚动的echart技能图会延迟展示出现

2.试着文档setTimeOut 延迟echart.init图表,发现不会延迟了。但是在无缝滚动中。在无缝滚动的重复图表移上去并没有echart事件,技能图没有展示Tootlip,但距离一会儿又可以了

排查分析问题

  1. vue-seamless-scroll的coyHtml是复制solt的innerHtml,因此延迟展示在你没有渲染时已经是复制好的dom节点了

  2. 在向上滚动的过程中实际上动画在向上滚动距离,渲染的dom依旧存在问题。并没有echart事件。是因为复制solt的innerHtml导致。

  3. 为什么一会儿又可以。在控制器看到是动画在滚动中以前的dom又开始回滚了。在肉身上以为是复制的dom,实际上已经是之前渲染的dom

解决问题

这里因为业务需求时间紧,直接组件当业务组件去开发

通过这些改动vue-seamless-scroll组件echart 图表渲染没有任何问题。唯一有问题就是当你的数据过多时。这时候可能会有性能问题