大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下如何解决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 在子组件中只显示一次的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!