【Vue和Echarts问题解决】Vue子组件中Echarts图

1. 问题描述：在Vue开发中推荐的是组件化开发，所以会将Echarts图表封装成为单独的组件。在需要的时候进行使用。首先，我在父组件的 created生命周期中获取到了需要展示的数据，进行包装之后传递到子组件，子组件通过props定义属性进行接收。但是问题出现了，在接收到数据之后页面只显示了一次图表，在刷新页面之后图表就消失了，这是怎么回事呢？ 我们发现第一次图表能正常显示，但是页面一刷新或者跳转到其它页面，再返回到该页面，图表就不显示了。由于 mounted 只会在挂载的时候执行一次，因此无法后续进行更新。

echarts图表只显示一次刷新之后就不见了

2. 解决问题的文章 : 解决问题

3. 具体情况：

父组件中的逻辑 子组件实现逻辑

4. 最终解决办法：需要在子组件中进行 父组件传递数据的变化，在数据发生变化的时候对图表进行重新渲染即可，这里使用 watch侦听器。

watch: {
      timeData() {
        this.$nextTick(() => {
          this.getInAndOutDataOptions()
        })
      },
      countData() {
        this.$nextTick(() => {
          this.getInAndOutDataOptions()
        })
      }
    }

使用watch解决之后