解决vue 中 echart 在子组件中只显示一次的问题
2018-10-15 17:06
阅读：971
问题描述
一次项目开发过程中，需要做一些图表，用的是百度开源的 echarts。 vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。
实际开发中，数据肯定都是异步获取的。所以我们在 mounted 生命周期中获取数据。对vue生命周期不熟悉的，可以去看一下我之前写一篇文章vue2.0项目实战（4）生命周期和钩子函数详解
由于父组件请求的数据并不是一成不变的，会根据不同的条件请求不同的数据，此时需要图表进行更新。
代码示例
在父组件中
// Main.vue <template> <div> ... <Pie :pieData=fullList></Pie> ... </div> </template> <script> import Pie from components/SourcePie export default { components: { Pie }, data(){ return { fullList:{} } }, mounted() { this._fullQuantity() }, methods: { _fullQuantity(){ // axios... } } } </script>在父组件中，通过api接口获得的数据传递给子组件。那么我们在子组件中：
我们发现第一次图表能正常显示，但是页面一刷新或者跳转到其它页面，再返回到该页面，图表就不显示了。
原因
自己当时没有想那么多为什么无法加载，因此在另一个父组件进行应用的时候，他是首屏就加载，数据不变动。
但是当数据变动之后，无法自动的更新图表。
由于 mounted 只会在挂载的时候执行一次，因此无法后续进行更新
解决办法
通过 watch 进行图表的更新
watch: { pieData() { this.$nextTick(() => { if (this.pieData) { this.init() } }) } },这样就能解决我们的问题了。
上一篇：CSS常用网站布局实例
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：解决vue 中 echart 在子组件中只显示一次的问题
文章链接：http://soscw.com/essay/18298.html
文章标题：解决vue 中 echart 在子组件中只显示一次的问题
文章链接：http://soscw.com/essay/18298.html
评论
亲，登录后才可以留言！