vue中父组件向子组件echarts传值问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue中父组件向子组件echarts传值问题,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2488字,纯文字阅读大概需要4分钟。
内容图文
记录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传值问题 ,更多相关内容请关注Gxl网。
相关推荐:
Javascript 严格模式详解
php实现登录功能的相关代码解析
JavaScript相关的内容讲解
以上就是vue中父组件向子组件echarts传值问题的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的vue中父组件向子组件echarts传值问题全部内容,希望文章能够帮你解决vue中父组件向子组件echarts传值问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。