解決vue 中 echart 在子組件中只顯示一次的問(wèn)題
問(wèn)題描述
一次項(xiàng)目開(kāi)發(fā)過(guò)程中,需要做一些圖表,用的是百度開(kāi)源的 echarts。 vue推薦組件化開(kāi)發(fā),所以就把每個(gè)圖表封裝成子組件,然后在需要用到該圖表的父組件中直接使用。
實(shí)際開(kāi)發(fā)中,數(shù)據(jù)肯定都是異步獲取的。所以我們?cè)?mounted 生命周期中獲取數(shù)據(jù)。對(duì)vue生命周期不熟悉的,可以去看一下我之前寫(xiě)一篇文章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>
在父組件中,通過(guò)api接口獲得的數(shù)據(jù)傳遞給子組件。那么我們?cè)谧咏M件中:
// 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: '實(shí)體統(tǒng)計(jì)', type: 'pie', radius: '50%', center: ['50%', '60%'], data: [{ value: _this.pieData.videoNum, name: '影視數(shù)據(jù)' }, { value: _this.pieData.albumNum, name: '專(zhuān)輯數(shù)據(jù)' }, { value: _this.pieData.songNum, name: '歌曲數(shù)據(jù)' }, { value: _this.pieData.novelNum, name: '小說(shuō)數(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)第一次圖表能正常顯示,但是頁(yè)面一刷新或者跳轉(zhuǎn)到其它頁(yè)面,再返回到該頁(yè)面,圖表就不顯示了。
原因
自己當(dāng)時(shí)沒(méi)有想那么多為什么無(wú)法加載,因此在另一個(gè)父組件進(jìn)行應(yīng)用的時(shí)候,他是首屏就加載,數(shù)據(jù)不變動(dòng)。
但是當(dāng)數(shù)據(jù)變動(dòng)之后,無(wú)法自動(dòng)的更新圖表。
由于 mounted 只會(huì)在掛載的時(shí)候執(zhí)行一次,因此無(wú)法后續(xù)進(jìn)行更新
解決辦法
通過(guò) watch 進(jìn)行圖表的更新
watch: { pieData() { this.$nextTick(() => { if (this.pieData) { this.init() } }) } },
這樣就能解決我們的問(wèn)題了。
相關(guān)文章
vue中this.$message的實(shí)現(xiàn)過(guò)程詳解
Message在開(kāi)發(fā)中的使用頻率很高,也算是Element-UI組件庫(kù)中比較簡(jiǎn)單的,對(duì)于感興趣的朋友可以一起探討一下Message組件的實(shí)現(xiàn),本文詳細(xì)介紹了vue中this.$message的實(shí)現(xiàn)過(guò)程,感興趣的同學(xué)可以參考一下2023-04-04使用開(kāi)源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示功能
這篇文章主要介紹了使用開(kāi)源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07基于Vue.js實(shí)現(xiàn)數(shù)字拼圖游戲
為了進(jìn)一步讓大家了解Vue.js的神奇魅力,了解Vue.js的一種以數(shù)據(jù)為驅(qū)動(dòng)的理念,本文主要利用Vue實(shí)現(xiàn)了一個(gè)數(shù)字拼圖游戲,其原理并不是很復(fù)雜,下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)。2016-08-08解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問(wèn)題
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細(xì)的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下2023-08-08vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue實(shí)現(xiàn)路由不變的情況下,刷新頁(yè)面操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)路由不變的情況下,刷新頁(yè)面操作,結(jié)合實(shí)例形式分析了vue路由不變的情況下刷新頁(yè)面具體原理、操作方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-02-02Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng),需要的朋友可以參考下2019-12-12vue單頁(yè)面應(yīng)用打開(kāi)新窗口顯示跳轉(zhuǎn)頁(yè)面的實(shí)例
今天小編就為大家分享一篇vue單頁(yè)面應(yīng)用打開(kāi)新窗口顯示跳轉(zhuǎn)頁(yè)面的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09