欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue 中 echart 在子組件中只顯示一次的問題

 更新時間：2018年08月07日 10:29:07   作者：_marven  
vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧

問題描述

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

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

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

代碼示例

在父組件中

// 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 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} (vvxyksv9kd%)",
   position: ['50%', '50%']
   },
   series: [{
   name: '實體統(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)時沒有想那么多為什么無法加載，因此在另一個父組件進行應(yīng)用的時候，他是首屏就加載，數(shù)據(jù)不變動。

但是當(dāng)數(shù)據(jù)變動之后，無法自動的更新圖表。

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

解決辦法

通過 watch 進行圖表的更新

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

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

相關(guān)文章

最新評論