关于前端:记录项目中使用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}%'
      }
    }
  ]
};