您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue使用element ui彈窗與echarts間的問題如何解決”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“vue使用element ui彈窗與echarts間的問題如何解決”文章能幫助大家解決問題。
在剛進(jìn)入頁面的時候抽屜是關(guān)閉的,那echarts不進(jìn)行獲取dom,當(dāng)點擊抽屜出來的時候,有個opened事件,在這個事件里邊進(jìn)行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} (rjvtndy%)' }, 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) } }
關(guān)于“vue使用element ui彈窗與echarts間的問題如何解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。