您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue中如何解決使用element ui彈窗與echarts之間的問題,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
今天項目中有個需求,就是在頁面中點擊一個圖標(biāo),彈出一個抽屜式的彈窗(彈窗是element UI的抽屜),彈窗里邊是echarts呈現(xiàn)的數(shù)據(jù),當(dāng)我直接用echarts的時候,報錯dom沒有獲取到;
這就陷入疑惑,平時都是這樣獲取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在剛進入頁面的時候抽屜是關(guān)閉的,那echarts不進行獲取dom,當(dāng)點擊抽屜出來的時候,有個opened事件,在這個事件里邊進行echarts的初始化,執(zhí)行數(shù)據(jù);
<el-drawer title="分析圖表" :modal="false" :close-on-click-modal="false" :modal-append-to-body="false" size="600px" :visible.sync="dataVisible" @opened="opens" > <div ref="main" ></div> </el-drawer> export default { data() { return { isColor: true, option1: { title: { text: '總資產(chǎn)占比分析', x: 'left' }, tooltip: { trigger: 'item', formatter: '{a} <br/> : {c} (f0jsgov%)' }, legend: { orient: 'vertical', right: '10%', top: '35%', data: ['A', 'B', 'C', 'D'] }, series: [ { name: '訪問來源', type: 'pie', radius: '70%', center: ['25%', '60%'], data: [ { value: 335, name: 'A' }, { value: 310, name: 'B' }, { value: 234, name: 'C' }, { value: 135, name: 'D' } ], label: { normal: { show: false, position: 'center' } } } ] }, }} } method:{ opens(){ this.$nextTick(() => { this.pie1() }) }, pie1(){ this.$echarts.init(this.$refs.main).setOption(this.option1) } }
這樣防止dom沒有渲染之前,數(shù)據(jù)先加載,主要是用了element ui彈窗的open方法,具體的為啥用這個方法,還需要研究下
關(guān)于“vue中如何解決使用element ui彈窗與echarts之間的問題”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。