解決vue 中 echart 在子組件中只顯示一次的問題
問題描述
一次項(xiàng)目開發(fā)過程中，需要做一些圖表，用的是百度開源的 echarts。 vue推薦組件化開發(fā)，所以就把每個(gè)圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。
實(shí)際開發(fā)中，數(shù)據(jù)肯定都是異步獲取的。所以我們?cè)?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ù)傳遞給子組件。那么我們?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} (wppm3vysvbp%)",
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()
}
})
}
},
這樣就能解決我們的問題了。
相關(guān)文章
這篇文章主要介紹了vue打包添加gzip配置項(xiàng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue.js中ref及$refs的使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue之如何配置默認(rèn)顯示頁面和默認(rèn)路由問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue中使用Printjs插件實(shí)現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無需離開界面，也無需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實(shí)現(xiàn)打印功能,需要的朋友可以參考下2022-08-08
vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解
這篇文章主要介紹了vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時(shí)代，大概是15~16年左右我開始解除阿里Iconfont圖標(biāo)庫，剛開始就只會(huì)下載圖標(biāo)使用，需要的朋友可以參考下2021-10-10
Vue如何循環(huán)提取對(duì)象數(shù)組中的值
這篇文章主要介紹了Vue如何循環(huán)提取對(duì)象數(shù)組中的值,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了Vue 過濾器filters的實(shí)例代碼以及vue過濾器的基本用法,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue下使用nginx刷新頁面404的問題解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue3.x最小原型系統(tǒng)講解。既然用Vue3.0構(gòu)建最小原型系統(tǒng)，那么肯定要用尤大的最新構(gòu)建工具Vite來進(jìn)行項(xiàng)目的初始化，下文舉例說明,需要的朋友可以參考一下2022-02-02