vue 中 echart 在子组件中只显示一次的问题

问题描述

一次项目开发过程中，需要做一些图表，用的是百度开源的 echarts。 vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。

实际开发中，数据肯定都是异步获取的。所以我们在 mounted 生命周期中获取数据。对vue生命周期不熟悉的，可以去看一下我之前写一篇文章vue2.0项目实战（4）生命周期和钩子函数详解

由于父组件请求的数据并不是一成不变的，会根据不同的条件请求不同的数据，此时需要图表进行更新。

代码示例

在父组件中

// 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 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/>{b} : {c} ({d}%)",
            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()
        }
      })
    }
  },

这样就能解决我们的问题了。

如有问题，请留言

本文同步发布在 https://www.cssge.com/