Как правильно установить градиент шкалы vue-echart?

Я использую vue-echarts и создал следующий компонент:

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

И когда я использую компонент, вот результат (который выглядит хорошо):

Но когда значение уменьшается, это ужасный результат:

Должно быть чего-то не хватает в конфигурации, знаете как исправить внешний вид?

Редактировать №1

Благодаря мнению разработчиков, я изменил этот фрагмент кода и получил желаемый вид:

itemStyle: {
  color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 100,
    y2: 0,
    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' }
    ],
    global: true
  }
}