同時使用swiper和echarts遇到的問題如何解決

今天小編給大家分享一下同時使用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遇到的問題如何解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。