How can I properly set the gradient of a gauge vue-echart?

Question

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?

Edit #1

Thanks to A mere dev insights, I changed this chunk of code and got the appearance I wanted:

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

Answer 1

Using gauge series type

I don't know why the colorStops go from 0 to 100% of the gauge value and not from 0 to 100% of the whole gauge axisLine. And I don't know how to change this.

But instead of using percentage, you can use global: true to set the gradient from left to right of the chart (in px). Adjust the values according to your chart's size.

Here is my custom example on Echarts online editor.

itemStyle: {
  color: {
    type: 'linear',
    x: 200, // the left of the gauge, in px
    x2: 900, // the right of the gauge, in px
    global: true,
    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' }
    ]
  }
},

Result :

Using custom series type

This might be harder to implement, but also cleaner. This official example (using a custom series) looks similar to what you want, you'll just have to adjust a few things.