How does echarts fill the width of the parent element?

I have encapsulated an electrocharts component in Vue to display charts.

It receives three parameters from the parent component: chartWidth, chartHeight, and options.

When the chart is wrapped in a b-tab (bootstrap), I use “1000px” for the height of the chart, and it performs normally. When I use ‘100%‘, it does not occupy the entire width of the parent element.

<div class="carousel-slide">
<ChartView :options="buildingEnergyConsumption"
       :chartWidth="'100%'"
       :chartHeight="'550px'"></ChartView>
</div>

And the browser gives an warn:
Can’t get DOM width or height Please check dom. clientWidth and dom. clientHeight. They should not be 0. For example, you may need to call this in the callback of window. onload

I think it’s because the b-tab has not been rendered yet, which prevents the component from obtaining the width of the parent element.

The code is here:

<template>
    <div ref="chart" :style="{ width: chartWidth, height: chartHeight }"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'ChartView',
        props: {
            chartWidth: {
                type: String,
                default: '100%'
            },
         
            chartHeight: {
                type: String,
                default: '100%'
            },
            options: {
                type: Object,
                required: true,
            }
        },
        methods: {
           
            initChart() {
                this.chart = echarts.init(this.$refs.chart);
                this.chart.setOption(this.options);
 
                window.addEventListener('resize', this.resizeChart);
            },
 
            resizeChart() {
                if (this.chart) {
                    this.chart.resize();
                }
            },
        },
        mounted() {
            this.initChart();
        },
        watch: {
           
            options: {
                handler(newVal) {
                    this.chart.clear();
                    this.chart.setOption(newVal);
                },
                deep: true
            }
        },
        beforeDestroy() {

            this.chart.dispose();

            window.removeEventListener('resize', this.resizeChart);
        }
    };
</script>

<style scoped>
</style>

So how should this situation be resolved?

Looking forward to everyone’s help, thank you!