小編給大家分享一下如何解決vue中echart 在子組件中只顯示一次的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來客戶和效益!成都創(chuàng)新互聯(lián)為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計制作，服務(wù)好的網(wǎng)站設(shè)計公司，成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)負(fù)責(zé)任的成都網(wǎng)站制作公司!

問題描述

一次項(xiàng)目開發(fā)過程中，需要做一些圖表，用的是百度開源的 echarts。 vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。

實(shí)際開發(fā)中，數(shù)據(jù)肯定都是異步獲取的。所以我們在 mounted 生命周期中獲取數(shù)據(jù)。對vue生命周期不熟悉的，可以去看一下我之前寫一篇文章vue2.0項(xiàng)目實(shí)戰(zhàn)（4）生命周期和鉤子函數(shù)詳解

由于父組件請求的數(shù)據(jù)并不是一成不變的，會根據(jù)不同的條件請求不同的數(shù)據(jù)，此時需要圖表進(jìn)行更新。

代碼示例

在父組件中

// Main.vue

在父組件中，通過api接口獲得的數(shù)據(jù)傳遞給子組件。那么我們在子組件中：

// SourcePie.vue

我們發(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()
  }
  })
 }
 },

這樣就能解決我們的問題了。

以上是“如何解決vue中echart 在子組件中只顯示一次的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！