In the Vue project, the HighCharts chart component is used to make a 3D ring diagram, why there is a large area of white space in the upper and lower part of the title, and how to deal with this.

as shown in the figure, the div size of this area I defined is 250mm 300, but the height in the debugger is about 700mm.

component code:

<template>
<div class="container">
    <div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from "highcharts"
export default {
    props: {
        id: {
            type: String
        },
            //option 
        option: {
            type: Object
        }
    },
    mounted() {
        HighCharts.chart(this.id, this.option)
    }
}
</script>
 
<style scoped>
/*  */   
.container {
width: 200px;
height: 250px;
}
</style>

reference code:

<div style="width:auto;float:left;">
   <pie :id="id" :option="option"></pie>
</div>

id:"test",
option:{
    chart:{
        type:"pie",
        options3d:{
            enabled:true,  //3D
            alpha:45,
            beta:0,
        }
    },
    title:{
        text:"" //
    },
    // subtitle:{
    //     text:"" //
    // },
    plotOptions:{
        pie:{
            allowPointSelect:true,  //
            cursor:"pointer",  //
            depth:35,       //
            innerSize: 40, //
            dataLabels:{
                enabled:false,  //tip
            }
        }
    },
    series:[
        {
            type: "pie",
            name: "1",//,
            data: [
                ["1",12],//{name: "1",y: 12}
                ["2",23],
                ["3",19],
                ["4",29]
            ]
        }
    ]
}

there is the same problem with echarts, but there is not so much white space.