脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 使用swiper和echarts遇到问题

关于同时使用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遇到问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论