in the vue template, the control child element (the echarts chart component) is equal in size to the parent element (div). In the mounted hook of the parent element, the height and width of the parent element (div) are obtained and passed to the child element according to refs, but each time the height is printed in mounted the code is as follows:
<template>
<div class="pie" ref="monthPie">
<v-colorPie :domHeight="domHeight"/>
</div>
</template>
<script>
export default {
data(){
return{
domHeight:0
}
},
mounted(){
alert(this.$refs.monthPie.offsetHeight)
}
}
</script>
<style>
.pie{
margin-top:1%
height:93%
width:100%
}
</style>