ECharts gauge-ring 环形仪表盘如何配置progress的分段渐变color属性

错误原因 #

你直接将色标数组赋值给color属性的写法不符合ECharts配置规范，该色标数组属于渐变对象的colorStops属性，不能直接传入color。

解决方案 #

根据你要实现的效果二选一即可：

• 如果你需要的是硬分段效果（不同进度区间对应纯色，区间之间无渐变过渡），直接用回调函数实现最简便：

progress: {
  itemStyle: {
    color: (params) => {
      const percent = params.percent
      if (percent <= 0.25) return '#FF6E76'
      if (percent <= 0.5) return '#FDDD60'
      if (percent <= 0.75) return '#58D9F9'
      return '#7CFFB2'
    }
  }
}

• 如果你需要的是渐变过渡效果（不同颜色区间平滑过渡），使用ECharts内置的圆锥渐变ConicGradient实现即可，刚好适配环形仪表盘的圆周分布：

progress: {
  itemStyle: {
    color: new echarts.graphic.ConicGradient(0, 0.5, 0.5, [
      [0.25, '#FF6E76'],
      [0.5, '#FDDD60'],
      [0.75, '#58D9F9'],
      [1, '#7CFFB2']
    ])
  }
}

注意：使用ConicGradient需要保证ECharts版本 ≥ 5.0.0。

内容的提问来源于stack exchange，提问作者JustFun2020