关于前端:记录项目中使用echarts仪表盘中得分环的实现记录

我的项目要写这种图, 其中背景突变找了那么长时间记录一下

背景突变应用这个属性:

色值color换成线性色彩对象:

简略写法是:

数据显示的突变应用这个属性:

上面是全副配置

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 0,
      endAngle: 360,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#D46B08' },
            { offset: 1, color: '#FFD591' }
          ])
        }
      },
      axisLine: {
        lineStyle: {
          width: 30,
          color: [[1, {
            type: 'linear',
            colorStops: [
              { offset: 0, color: 'red' },
              { offset: 1, color: 'blue' }
              ]
          }]]
          // opacity: 0
        }
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: [
        {
          value: 25.33
        }
      ],
      title: {
        fontSize: 14
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '0%'],
        fontSize: 20,
        formatter: '{value}%'
      }
    }
  ]
};