I’m using vue-echarts and I created following component:

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

use([GaugeChart, CanvasRenderer])

const roundCap = true
const width = 12

const option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#E02F1E' },
            { offset: 0.1, color: '#E53C2B' },
            { offset: 0.2, color: '#ED7936' },
            { offset: 0.3, color: '#F19C3C' },
            { offset: 0.41, color: '#E9AD3C' },
            { offset: 0.52, color: '#E0BF3C' },
            { offset: 0.63, color: '#BCBC33' },
            { offset: 0.72, color: '#75B520' },
            { offset: 0.86, color: '#29AE0C' },
            { offset: 1, color: '#01AA01' }
          ]
        }
      },
      progress: {
        show: true,
        roundCap,
        width
      },
      axisLine: {
        roundCap,
        lineStyle: { width }
      },
      data: [{ value: 100 }]
    }
  ]
}
</script>

<template>
  <VChart :option />
</template>

And when I use the component, this is the result (which looks good):

But when the value decreases, this is the ugly result:

There must be something I’m missing in the configuration, do you know how can I fix the appearance?