解決vue 中 echart 在子組件中只顯示一次的問題
問題描述
一次項目開發(fā)過程中,需要做一些圖表,用的是百度開源的 echarts。 vue推薦組件化開發(fā),所以就把每個圖表封裝成子組件,然后在需要用到該圖表的父組件中直接使用。
實際開發(fā)中,數(shù)據(jù)肯定都是異步獲取的。所以我們在 mounted 生命周期中獲取數(shù)據(jù)。對vue生命周期不熟悉的,可以去看一下我之前寫一篇文章vue2.0項目實戰(zhàn)(4)生命周期和鉤子函數(shù)詳解
由于父組件請求的數(shù)據(jù)并不是一成不變的,會根據(jù)不同的條件請求不同的數(shù)據(jù),此時需要圖表進(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 style="width:300px;height:260px" 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} (vvxyksv9kd%)", position: ['50%', '50%'] }, series: [{ name: '實體統(tǒng)計', 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)時沒有想那么多為什么無法加載,因此在另一個父組件進(jìn)行應(yīng)用的時候,他是首屏就加載,數(shù)據(jù)不變動。
但是當(dāng)數(shù)據(jù)變動之后,無法自動的更新圖表。
由于 mounted 只會在掛載的時候執(zhí)行一次,因此無法后續(xù)進(jìn)行更新
解決辦法
通過 watch 進(jìn)行圖表的更新
watch: { pieData() { this.$nextTick(() => { if (this.pieData) { this.init() } }) } },
這樣就能解決我們的問題了。
相關(guān)文章
vue中this.$message的實現(xiàn)過程詳解
Message在開發(fā)中的使用頻率很高,也算是Element-UI組件庫中比較簡單的,對于感興趣的朋友可以一起探討一下Message組件的實現(xiàn),本文詳細(xì)介紹了vue中this.$message的實現(xiàn)過程,感興趣的同學(xué)可以參考一下2023-04-04使用開源Cesium+Vue實現(xiàn)傾斜攝影三維展示功能
這篇文章主要介紹了使用開源Cesium+Vue實現(xiàn)傾斜攝影三維展示,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問題
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細(xì)的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下2023-08-08vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下2019-12-12vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例
今天小編就為大家分享一篇vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09