vue-seamless-scroll 与 echarts 三联水球图循环滚动的渲染难题-出现短暂空白

工作中要实现下述一个循环滚动的三联水滴图，毫无疑问想到vue-seamless-scroll插件。

注意：不能单独写三个组件了，而是在一个组件中实现。

如何实现看这个echarts三联水球图_echarts水球图-CSDN博客

本文主要解决使用vue-seamless-scroll插件过程中嵌入echarts三联水球图后循环滚动中出现短暂空白，导致无法正常渲染的问题。

我当时使用了this.$nextTick不生效，查阅文档必须使用echart渲染放到setTimeout宏任务

this.$nextTick 可能无法捕获（因为它只等待 Vue 同步的 DOM 更新）

官方文档：09 - echart图表无缝滚动 | vue-seamless-scroll--09 - echart图表无缝滚动

仔细解释下原因：

vue-seamless-scroll 这类滚动组件通常会在内部复制一份原始 DOM 结构（用于实现无缝滚动的视觉效果），这个复制过程是同步执行的。如果在组件还没完成复制时就执行 ECharts 渲染，可能只能获取到初始的 DOM 元素，而无法获取到复制后的元素，导致部分图表无法正常渲染。

通过 setTimeout(() => {}, 0) 将 ECharts 渲染逻辑放入宏任务队列：

1. 会先让主线程完成当前同步代码（包括 vue-seamless-scroll 的 DOM 复制工作）
2. 等待同步任务完成后，再执行宏任务中的 ECharts 渲染逻辑
3. 此时 document.querySelectorAll('.li-item') 才能获取到包括复制后在内的所有元素

这样就能确保 ECharts 初始化时，所有需要渲染图表的 DOM 元素（包括组件复制产生的元素）都已存在，避免因 DOM 未准备好而导致的渲染问题。