怎么解決vue中echart在子組件中只顯示一次的問(wèn)題

這篇“怎么解決vue中echart在子組件中只顯示一次的問(wèn)題”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“怎么解決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  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} (zluenck%)",
   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中echart在子組件中只顯示一次的問(wèn)題”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。