如何设置vue-echarts图表宽高？消除容器多余空白

我正在使用vue-echarts组件库，创建了如下组件：

<script setup lang="ts">
import { use } from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'

use([GaugeChart, CanvasRenderer])

const option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      radius: '100%',
      detail: {
        width: '60%', // 默认值100
        lineHeight: 40, // 默认值30
        offsetCenter: [0, -12],
        formatter: (value) => `{value|${value}}`,
        rich: {
          value: { fontSize: 40 }
        }
      },
      data: [{ value: 58.2 }]
    }
  ]
}
</script>

<template>
  <VChart
    style="width: 600px; height: 400px"
    :option
  />
</template>

使用该组件后，效果如下：
![图表效果展示]

可以看到，仪表盘图表的尺寸远小于其容器（canvas），存在大量空白。由于我需要在多处复用该组件，不希望保留这些空白，请问能否指定图表的实际宽高？

编辑1 #

经过反复尝试，我达到了如下效果：
![调整后图表效果]

现在仪表盘的样式完全符合我的需求，但底部仍存在多余空白，导致组件高度超出实际所需。由于我需要在多处使用并对齐该组件，无法保留这些空白，请问能否在不影响现有样式的前提下消除它？

更新后的代码：

<script setup lang="ts">
import { use } from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'

use([GaugeChart, CanvasRenderer])

const option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      radius: '100%',
      detail: {
        offsetCenter: [0, -8],
        formatter: (value) => `{value|${value}}`,
        rich: {
          value: { fontSize: 24 }
        }
      },
      data: [{ value: 58.2 }]
    }
  ]
}
</script>

<template>
  <VChart
    style="width: 150px; height: 150px"
    :option
  />
</template>

编辑2 #

感谢@rozsazoltan的宝贵建议，我已达成目标，完整代码如下：

<script setup lang="ts">
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

const props = defineProps<{
  kpi: number
}>()

use([GaugeChart, CanvasRenderer])

const roundCap = true
const width = 12

const option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '62.5%'],
      radius: '100%',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: undefined,
      itemStyle: { color: '#58D9F9' },
      progress: {
        show: true,
        roundCap,
        width
      },
      pointer: undefined,
      axisLine: {
        roundCap,
        lineStyle: { width }
      },
      title: {
        offsetCenter: [0, 20],
        fontSize: 12
      },
      detail: {
        offsetCenter: [0, -8],
        valueAnimation: true,
        formatter: (value) => `{value|${value}}`,
        rich: {
          value: {
            fontSize: 20,
            fontWeight: 'bolder',
            color: 'black'
          }
        }
      },
      data: [
        {
          value: props.kpi,
          name: 'My Title'
        }
      ]
    }
  ]
}
</script>

<template>
  <VChart
    class="chart d-inline-block"
    :option
  />
</template>

<style scoped>
.chart {
  width: 105px;
  height: 105px;
}
</style>

内容的提问来源于stack exchange，提问作者PyKKe