Vue中父组件向子组件echarts传值问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文链接：https://blog.csdn.net/Uookic/article/details/80638883?utm_source=copy

问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常

原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据

解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染

/父组件
<div class="chart-wrapper">
<pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
</div>
...
import {getPie} from '@/api/status'
export default {
name: 'device',
data() {
return {
flag:false,
piedata:{},
...
},
created(){
this.init()
},
methods:{
init(){
getPie().then(this.getInfoSucc)
},
getInfoSucc(res){
res = res.data;
if(res.code ==0){
const values = res.values;
this.piedata = values.piedata;
this.flag = true
}
}

//子组件
<template>
<div :class="className" :style="{height:height,width:width}"></div>
</template> <script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { 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>