開(kāi)啟loop:true, 首先遇到echarts失效不能正常渲染的問(wèn)題，果斷百度發(fā)現(xiàn)是因?yàn)殚_(kāi)啟loop:true時(shí)，swiper會(huì)在前后復(fù)制同樣的slide保證循環(huán)效果，這樣以來(lái)初始化時(shí)使用的ID就不是唯一的了，導(dǎo)致echarts初始化無(wú)效了。

解決辦法

// 通過(guò)class獲取dom，并在循環(huán)時(shí)初始化，為了保證echarts初始化時(shí)dom已經(jīng)更新渲染，加一個(gè)setTimeout函數(shù)
?setTimeout(() => {
?// 解決繪圖復(fù)制出來(lái)的echarts沒(méi)有顯示的問(wèn)題
? const myEchart = document.getElementsByClassName('liquidfill')
? let chart = null
? for (const item of myEchart) {
? ? ? item.setAttribute('_echarts_instance_', '')
? ? ? chart = echarts.init(item)
? ? ? chart.setOption(option)
? }
})

問(wèn)題二

當(dāng)我沉浸在剛才解決的顯示問(wèn)題被解決的喜悅之中時(shí)，嘩。。。一盆涼水襲面而來(lái)，echarts包括標(biāo)簽上的點(diǎn)擊事件竟然失效了，當(dāng)然不是所有的都失效，但也很*疼啊，查找資料后發(fā)現(xiàn)和第一個(gè)問(wèn)題類似，同樣slide復(fù)制后click事件并沒(méi)有每一個(gè)都綁定，導(dǎo)致點(diǎn)擊失效。
解決辦法

查找資料發(fā)現(xiàn)swiper有一個(gè)click-slide的點(diǎn)擊事件,該事件可接收（index, realIndex）參數(shù)。

<swiper ref="mySwiper" class="my-swipe" :options="swiperOptions" @click-slide="goToPage"></swiper>`
goToPage(index, realIndex) {
// index 當(dāng)前slide下標(biāo)包含復(fù)制的slide
// realIndex 真實(shí)的下表 根據(jù)這個(gè)下標(biāo)執(zhí)行對(duì)應(yīng)方法即可。
}

到此這篇關(guān)于關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法的文章就介紹到這了,更多相關(guān)使用swiper和echarts遇到問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: