echarts 得分环样式设置

设置圆环样式

const gaugeData = [
  {
    value: 20,
  }
];
option = {
  series: [
    {
      type: 'gauge',
      showBackground: true,
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        // itemStyle: {
        //   color: '#F00',
          
        // },
        itemStyle: {
        // 设置圆环渐变背景色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#D46B08' },
            { offset: 1, color: '#FFD591' }
          ])
        },
        label: {
          show: true,
          backgroundColor: '#000',
          color: '#F00',
        },
        
      },
      axisLine: {
        lineStyle: {
          width: 40,
          // 设置圆环底色渐变或单一颜色
          color: [[1, {
            type: 'linear',
            colorStops: [
              {offset: 0, color: '#F00'},
              // {offset: 1, color: 'blue'}
            ]
          }]]
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData,
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '0%'],
        fontSize: 40,
        formatter: '{value}%'
      }
    },
    {
      // title边框层
      name: '背景圆环',
      z: 5,
      backgroundColor: '#0a214b',
      type: 'pie',
      cursor: 'default',
      center: ['50%', '50%'],
      radius: ['79%', '80%'],
      hoverAnimation: false,
      legendHoverLink: false,
      silent: true, //不响应和触发鼠标事件
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 0,
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: '#6E7079'
            }
          }
        }
      ]
    }
  ]
};