使用swiper轮播echarts图表时出现的图表不显示的问题

问题描述

开发项目可视化大屏的需求，有一块需要循环轮播展示echarts图表，于是选用了比较流行的swiper插件，但是实际开发时确发现，轮播到最后一个图的时候，图表并没有显示。于是，开始排查问题原因。

排查原因

• 首先问了gpt，给出的原因是：swiper的loop配置导致的。swiper实现循环轮播的机制是，分别复制第一个slide放到最后一个和最后一个slide放到第一个从而实现循环轮播的效果。
• 然后打开官方网站，找到一个循环播放的案例，审查元素发现确实如此。
• 于是，猜测原因，当swiper进行复制的时候，图表没有初始化，复制的时候并没有把图表复制过去。打开自己的项目审查元素的时候发现确实如此。

问题解决

给图表绑定相同的类名，初始化图表的时候，通过for循环初始化。

const chartClass = document.getElementsByClassName(‘chartContainer’);
for (let i = 0; i < chartClass .length; i++) {
const ele = chartClass [i];
if (ele.innerHTML === “”) {
echarts.init(element).setOption(this.option)
}
}

注意vue项目中，图表不要使用ref绑定dom，因为编译后ref会消失，swiper复制的时候slide上面是没有ref的。