這篇“怎么解決vue中echart在子組件中只顯示一次的問題”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么解決vue中echart在子組件中只顯示一次的問題”文章吧。

專業(yè)領(lǐng)域包括成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、商城網(wǎng)站建設(shè)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)建站的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(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
<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} (yfoodtq%)",
   position: ['50%', '50%']
   },
   series: [{
   name: '實(shí)體統(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中echart在子組件中只顯示一次的問題”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：怎么解決vue中echart在子組件中只顯示一次的問題
標(biāo)題路徑：http://www.rwnh.cn/article4/jscdie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、App開發(fā)、網(wǎng)站設(shè)計、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)