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

这篇“怎么解决vue中echart在子组件中只显示一次的问题”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么解决vue中echart在子组件中只显示一次的问题”文章吧。

专业领域包括成都网站制作、成都网站建设、商城网站建设、微信营销、系统平台开发， 与其他网站设计及系统开发公司不同，创新互联建站的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。

问题描述

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

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

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

代码示例

在父组件中

// Main.vue

在父组件中，通过api接口获得的数据传递给子组件。那么我们在子组件中：

// SourcePie.vue

我们发现第一次图表能正常显示，但是页面一刷新或者跳转到其它页面，再返回到该页面，图表就不显示了。

原因

自己当时没有想那么多为什么无法加载，因此在另一个父组件进行应用的时候，他是首屏就加载，数据不变动。

但是当数据变动之后，无法自动的更新图表。

由于 mounted 只会在挂载的时候执行一次，因此无法后续进行更新

解决办法

通过 watch 进行图表的更新

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

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

以上就是关于“怎么解决vue中echart在子组件中只显示一次的问题”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

新闻名称：怎么解决vue中echart在子组件中只显示一次的问题
标题路径：http://cdiso.cn/article/jscdie.html