如何正确配置vue-echarts仪表盘的渐变样式？

我使用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>

当数值设置为100时，仪表盘显示正常：

但将数值降低后，渐变显示出现异常：

解决方法 #

修改itemStyle中的渐变配置，调整渐变的坐标参数并开启全局渐变，修改后的代码如下：

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

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