图表时出现的图表不显示的问题"/>
使用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的。
更多推荐
使用swiper轮播echarts图表时出现的图表不显示的问题
发布评论