您好,登錄后才能下訂單哦!
小編給大家分享一下如何解決vue中echart 在子組件中只顯示一次的問題,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
問題描述
一次項(xiàng)目開發(fā)過程中,需要做一些圖表,用的是百度開源的 echarts。 vue推薦組件化開發(fā),所以就把每個(gè)圖表封裝成子組件,然后在需要用到該圖表的父組件中直接使用。
實(shí)際開發(fā)中,數(shù)據(jù)肯定都是異步獲取的。所以我們在 mounted 生命周期中獲取數(shù)據(jù)。對(duì)vue生命周期不熟悉的,可以去看一下我之前寫一篇文章vue2.0項(xiàng)目實(shí)戰(zhàn)(4)生命周期和鉤子函數(shù)詳解
由于父組件請(qǐng)求的數(shù)據(jù)并不是一成不變的,會(huì)根據(jù)不同的條件請(qǐng)求不同的數(shù)據(jù),此時(shí)需要圖表進(jìn)行更新。
代碼示例
在父組件中
// Main.vue <template> <div> ... <Pie :pieData="fullList"></Pie> ... </div> </template> <script> import Pie from 'components/SourcePie' export default { components: { Pie }, data(){ return { fullList:{} } }, mounted() { this._fullQuantity() }, methods: { _fullQuantity(){ // axios... } } } </script>
在父組件中,通過api接口獲得的數(shù)據(jù)傳遞給子組件。那么我們在子組件中:
// SourcePie.vue <template> <div id="data_source_con" v-if="pieData"></div> </template> <script> import echarts from 'echarts'; export default { name: 'dataSourcePie', data() { return { // }; }, props: { pieData: Object }, mounted() { this.init() }, methods: { init() { let _this = this; this.$nextTick(() => { var dataSourcePie = echarts.init(document.getElementById('data_source_con')); const option = { tooltip: { trigger: 'item', formatter: "{a} <br/> : {c} (6hbh2n5%)", position: ['50%', '50%'] }, series: [{ name: '實(shí)體統(tǒng)計(jì)', type: 'pie', radius: '50%', center: ['50%', '60%'], data: [{ value: _this.pieData.videoNum, name: '影視數(shù)據(jù)' }, { value: _this.pieData.albumNum, name: '專輯數(shù)據(jù)' }, { value: _this.pieData.songNum, name: '歌曲數(shù)據(jù)' }, { value: _this.pieData.novelNum, name: '小說數(shù)據(jù)' }, { value: _this.pieData.presonNum, name: '人員數(shù)據(jù)' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; dataSourcePie.setOption(option); window.addEventListener('resize', function() { dataSourcePie.resize(); }); }); } } }; </script>
我們發(fā)現(xiàn)第一次圖表能正常顯示,但是頁面一刷新或者跳轉(zhuǎn)到其它頁面,再返回到該頁面,圖表就不顯示了。
原因
自己當(dāng)時(shí)沒有想那么多為什么無法加載,因此在另一個(gè)父組件進(jìn)行應(yīng)用的時(shí)候,他是首屏就加載,數(shù)據(jù)不變動(dòng)。
但是當(dāng)數(shù)據(jù)變動(dòng)之后,無法自動(dòng)的更新圖表。
由于 mounted 只會(huì)在掛載的時(shí)候執(zhí)行一次,因此無法后續(xù)進(jìn)行更新
解決辦法
通過 watch 進(jìn)行圖表的更新
watch: { pieData() { this.$nextTick(() => { if (this.pieData) { this.init() } }) } },
這樣就能解決我們的問題了。
以上是“如何解決vue中echart 在子組件中只顯示一次的問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。