Vue 项目中使用HighCharts 图表组件制作3D环图，为什么标题上下部分会有特别大面积的空白，这个应该怎么处理。

Question

如图所示，我定义的这个区域的div的大小是250*300 的，但是在调试器中看高度为700左右

组件代码：

<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>

引用代码：

<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]
            ]
        }
    ]
}

用 echarts 也有这样的问题但是没这么多的空白区域。

Answer 1

var chart = Highcharts.chart('container', {

chart: {
    type: 'pie',
    width: 300,
    height: 300,


},