echarts 绘制圆形进度条带渐变色

 

const gradient = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
  { offset: 0, color: '#1044EE' },
  { offset: 1, color: '#00FFF6' }
]);
option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '50%'],
      startAngle: 90,
      endAngle: -270,
      itemStyle: {
        color: gradient
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 40,
          color: [[1, '#212939']] // 底色
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: -20,
        color: '#999',
        fontSize: 20
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, 0],
        fontSize: 60,
        fontWeight: 'bolder',
        formatter: '{value} %',
        color: '#000'
      },
      data: [
        {
          value: 30
        }
      ]
    }
  ]
};