您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了如何解决vue中父组件向子组件echarts传值问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
问题:当父组件传值给子组件echarts时,发现子组件获取的props为空,刚开始以为是钩子函数放错了地方,后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常
原因:后来经过排查,此处省略N字,发现echarts是在渲染的时候就传递数据
解决方案:在父组件定义一个flag,当数据获得的之后再进行子组件的渲染
//父组件 <p class="chart-wrapper"> <pie-chart v-if="flag" :pie-data="piedata"></pie-chart> </p> ... export default { name: 'device', data() { return { flag:false, piedata:{}, ... }, created(){ this.init() }, methods:{ init(){ axios.get('/static/mock/status/pie.json').then(this.getInfoSucc) }, getInfoSucc(res){ res = res.data; if(res.code ==0){ const values = res.values; this.piedata = values.piedata; this.flag = true } }
//子组件<template> <p :class="className" :style="{height:height,width:width}"></p></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport { debounce } from '@/utils'export default { props: { pieData: { type: Object }, msg: { type:Number }, className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '300px' } }, data() { return { chart: null } }, // watch: { // piedata: { // deep: true, // handler(val) { // console.log(val) // this.setOptions(val) // } // } // }, mounted() { console.log("pieData:"+JSON.stringify(this.pieData)) this.initChart() this.__resizeHanlder = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) window.addEventListener('resize', this.__resizeHanlder) }, beforeDestroy() { if (!this.chart) { return } window.removeEventListener('resize', this.__resizeHanlder) this.chart.dispose() this.chart = null }, methods: { setOptions({ text, arrtype, arrdata } = {}) { this.chart.setOption({ title: { text: text }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { left: 'center', bottom: '10', data: arrtype }, calculable: true, series: [ { name: '', type: 'pie', roseType: 'radius', radius: [15, 95], center: ['50%', '42%'], data: arrdata, animationEasing: 'cubicInOut', animationDuration: 2600 } ] }) }, initChart() { this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.pieData); } } }</script>
然后子组件就能正常显示了
感谢你能够认真阅读完这篇文章,希望小编分享的“如何解决vue中父组件向子组件echarts传值问题”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。