vue中echart在子組件中只顯示一次怎么解決

今天小編給大家分享一下vue中echart在子組件中只顯示一次怎么解決的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

問題描述

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

實際開發中，數據肯定都是異步獲取的。所以我們在 mounted 生命周期中獲取數據。由于父組件請求的數據并不是一成不變的，會根據不同的條件請求不同的數據，此時需要圖表進行更新。

代碼示例

在父組件中

// 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接口獲得的數據傳遞給子組件。那么我們在子組件中：

// 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/>{b} : {c} (aegqsqibtmh%)",
   position: ['50%', '50%']
   },
   series: [{
   name: '實體統計',
   type: 'pie',
   radius: '50%',
   center: ['50%', '60%'],
   data: [{
    value: _this.pieData.videoNum,
    name: '影視數據'
    },
    {
    value: _this.pieData.albumNum,
    name: '專輯數據'
    },
    {
    value: _this.pieData.songNum,
    name: '歌曲數據'
    },
    {
    value: _this.pieData.novelNum,
    name: '小說數據'
    },
    {
    value: _this.pieData.presonNum,
    name: '人員數據'
    }
   ],
   itemStyle: {
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
   }
   }]
  };
  dataSourcePie.setOption(option);
  window.addEventListener('resize', function() {
   dataSourcePie.resize();
  });
  });
 }
 }
};
</script>

我們發現第一次圖表能正常顯示，但是頁面一刷新或者跳轉到其它頁面，再返回到該頁面，圖表就不顯示了。

原因

自己當時沒有想那么多為什么無法加載，因此在另一個父組件進行應用的時候，他是首屏就加載，數據不變動。

但是當數據變動之后，無法自動的更新圖表。

由于 mounted 只會在掛載的時候執行一次，因此無法后續進行更新

解決辦法

通過 watch 進行圖表的更新

watch: {
 pieData() {
  this.$nextTick(() => {
  if (this.pieData) {
   this.init()
  }
  })
 }
 },

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

以上就是“vue中echart在子組件中只顯示一次怎么解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。