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

在 Vue 中进行组件化开发时，我们经常会遇到需要将图表封装为子组件并在父组件中调用的需求。尤其是当你选择使用百度的 ECharts 进行图表展示时，有时会遇到图表在子组件中只显示一次的问题。今天，我们就来一下这个问题及其解决方案。

问题描述

在开发过程中，我们将每一个图表都封装为一个子组件，以便于在父组件中重复使用。由于数据通常是异步获取的，我们在 `mounted` 生命周期钩子中获取数据并展示图表。当父组件的数据发生变化时，子组件中的图表并不会自动更新。

代码示例

让我们看一个具体的代码示例。在父组件中：

```vue

```

在子组件SourcePie.vue中，我们遇到了一个有趣的挑战。当我们首次加载页面时，图表能够正常显示，但一旦我们刷新页面或跳转到其他页面再返回，图表就会消失。这背后的原因是什么呢？

我们来了解一下这个组件的结构。它是一个名为dataSourcePie的组件，主要功能是展示一个饼状图。这个图表的生成依赖于echarts库，并在组件挂载时通过init方法进行初始化。图表的数据来源于props中的pieData对象。

当初次加载页面时，由于组件是首次挂载，因此mounted钩子会被触发，init方法会被调用，图表得以正常显示。当页面刷新或跳转后，组件重新挂载，mounted钩子不会再次触发，导致图表无法重新初始化，从而消失。

那么，如何解决这一问题呢？我们可以借助Vue的watch属性来监听pieData的变化，并在数据变化时重新初始化图表。这样一来，无论何时数据发生变动，只要pieData发生变化，就会自动触发图表的更新。具体的实现方法如下：

在methods中添加watch属性，监听pieData的变化：

```javascript

watch: {

pieData() {

this.$nextTick(() => {

if (this.pieData) {

thisit(); // 当pieData变化时重新初始化图表

}

});

}

}

```

这样，无论何时数据发生变化，只要pieData有了新值，就会自动触发图表的更新，从而解决了我们遇到的问题。这种解决方案既简单又有效，确保了图表的实时更新。通过这种方式，我们的数据源Pie组件变得更加健壮和灵活，能够适应各种数据变化的需求。现在，无论用户如何操作页面，图表始终能够保持状态，为用户提供了更好的体验。