好资源导航 » 文章资讯 » 解决vue 中 echart 在子组件中只显示一次的问题

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

2023-09-09 08:03:04 63

问题描述

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

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

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

代码示例

在父组件中

//Main.vue

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

//SourcePie.vue

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

原因

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

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

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

解决办法

通过watch进行图表的更新

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐