vue中echart在子组件中只显示一次怎么解决
今天小编给大家分享一下vue中echart在子组件中只显示一次怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
问题描述
一次项目开发过程中，需要做一些图表，用的是百度开源的 echarts。 vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。
实际开发中，数据肯定都是异步获取的。所以我们在 mounted 生命周期中获取数据。由于父组件请求的数据并不是一成不变的，会根据不同的条件请求不同的数据，此时需要图表进行更新。
代码示例
在父组件中
// 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接口获得的数据传递给子组件。那么我们在子组件中：
// SourcePie.vue
<template>
<div id="data_source_con" v-if="pieData"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'dataSourcePie',
data() {
return {
//
};
},
props: {
pieData: Object
},
mounted() {
this.init()
},
methods: {
init() {
let _this = this;
this.$nextTick(() => {
var dataSourcePie = echarts.init(document.getElementById('data_source_con'));
const option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
position: ['50%', '50%']
},
series: [{
name: '实体统计',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: [{
value: _this.pieData.videoNum,
name: '影视数据'
},
{
value: _this.pieData.albumNum,
name: '专辑数据'
},
{
value: _this.pieData.songNum,
name: '歌曲数据'
},
{
value: _this.pieData.novelNum,
name: '小说数据'
},
{
value: _this.pieData.presonNum,
name: '人员数据'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
dataSourcePie.setOption(option);
window.addEventListener('resize', function() {
dataSourcePie.resize();
});
});
}
}
};
</script>我们发现第一次图表能正常显示，但是页面一刷新或者跳转到其它页面，再返回到该页面，图表就不显示了。
原因
自己当时没有想那么多为什么无法加载，因此在另一个父组件进行应用的时候，他是首屏就加载，数据不变动。
但是当数据变动之后，无法自动的更新图表。
由于 mounted 只会在挂载的时候执行一次，因此无法后续进行更新
解决办法
通过 watch 进行图表的更新
watch: {
pieData() {
this.$nextTick(() => {
if (this.pieData) {
this.init()
}
})
}
},这样就能解决我们的问题了。
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
以上就是“vue中echart在子组件中只显示一次怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论