// 通過class獲取dom，并在循環(huán)時初始化，為了保證echarts初始化時dom已經(jīng)更新渲染，加一個setTimeout函數(shù)
?setTimeout(() => {
?// 解決繪圖復(fù)制出來的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)
? }
})

問題二

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

查找資料發(fā)現(xiàn)swiper有一個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ù)這個下標(biāo)執(zhí)行對應(yīng)方法即可。
}

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

您可能感興趣的文章: