关于同时使用swiper和echarts遇到的问题及解决方法
更新时间：2023年04月12日 11:33:00 作者：sosoYU
这篇文章主要介绍了关于同时使用swiper和echarts遇到的问题及解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
项目背景
场景：需要在swiper中每个轮播项中展示包含不同的echarts,并开启loop:true循环
swiper: 5.3.6
vue-awesome-swiper: 4.0.4
echarts: 5.2.1
问题一
开启loop:true, 首先遇到echarts失效不能正常渲染的问题，果断百度发现是因为开启loop:true时，swiper会在前后复制同样的slide保证循环效果，这样以来初始化时使用的ID就不是唯一的了，导致echarts初始化无效了。
解决办法
// 通过class获取dom，并在循环时初始化，为了保证echarts初始化时dom已经更新渲染，加一个setTimeout函数
setTimeout(() => {
// 解决绘图复制出来的echarts没有显示的问题
const myEchart = document.getElementsByClassName('liquidfill')
let chart = null
for (const item of myEchart) {
item.setAttribute('_echarts_instance_', '')
chart = echarts.init(item)
chart.setOption(option)
}
})问题二
- 当我沉浸在刚才解决的显示问题被解决的喜悦之中时，哗。。。一盆凉水袭面而来，echarts包括标签上的点击事件竟然失效了，当然不是所有的都失效，但也很*疼啊，查找资料后发现和第一个问题类似，同样slide复制后click事件并没有每一个都绑定，导致点击失效。
- 解决办法
查找资料发现swiper有一个click-slide的点击事件,该事件可接收（index, realIndex）参数。
<swiper ref="mySwiper" class="my-swipe" :options="swiperOptions" @click-slide="goToPage"></swiper>`
goToPage(index, realIndex) {
// index 当前slide下标包含复制的slide
// realIndex 真实的下表 根据这个下标执行对应方法即可。
}到此这篇关于关于同时使用swiper和echarts遇到的问题及解决方法的文章就介绍到这了,更多相关使用swiper和echarts遇到问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
js模仿php中strtotime()与date()函数实现方法
这篇文章主要介绍了js模仿php中strtotime()与date()函数实现方法,涉及javascript时间操作的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇基于rem的移动端响应式适配方案(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
css实现窗户上水珠效果，效果特别逼真，窗外的雨淅淅沥沥飘打在玻璃上，看起来很像模糊的窗外，斜滴的雨露，接下来给大家一起来用CSS技术实现这样一幅画面，下面给大家分享使用纯css实现窗户玻璃雨滴逼真效果，感兴趣的朋友快乐围观吧2015-08-08
下面小编就为大家带来一篇JS中位置与大小的获取方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
在开发中通用的几个方法，我们把它们放到utility目录下或者utility.js中；所有的提示信息和报错信息统一放置在一起。看起来都是小小的几步，却能让咱们开发的代码同事读起来更顺畅，下个项目中也能用上。2009-06-06
这篇文章主要和大家谈一谈bootstrap响应式布局，本教程讲解如何在网页布局中应用响应式设计，感兴趣的小伙伴们可以参考一下2016-05-05
JS代码格式化和语法着色V2...2006-10-10
这篇文章主要介绍了JS数组排序技巧,实例汇总了JavaScript冒泡排序、sort排序、快速排序、希尔排序等,并附带分析了sort排序的相关注意事项,需要的朋友可以参考下2015-11-11
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
这篇文章主要介绍了JavaScript函数式编程(Functional Programming)组合函数(Composition)用法,结合实例形式分析了javascript函数式编程中组合函数的概念、原理、用法及操作注意事项,需要的朋友可以参考下2019-05-05
Javascript跨域访问是web开发者经常遇到的问题，什么是跨域，就是一个域上加载的脚本获取或操作另一个域上的文档属性。下面这篇文章主要介绍了JavaScript用JSONP跨域请求数据的方法,需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
最新评论