ECharts 仪表盘深度定制指南：圆角进度条、动态标签颜色与刻度隐藏

——基于实战需求的配置解析与完整代码实现

最近在项目中使用到了 Echarts 的仪表盘，在这里记录一下一些配置项

差异分析

Echats 官网提供的一个基础仪表盘长这样：

与基础仪表盘相比，目标样式如下：

区别：

• 极简设计：隐藏所有刻度线与小数标识
• 视觉一致性：标签颜色与进度条分段同步
• 圆角风格：进度条端点圆角处理
• 定制指针：简化指针形态

核心配置解析

基础布局设定

{
  type: 'gauge',
  startAngle: 180,// 逆时针起始角度
  endAngle: 0,// 顺时针终止角度
  center: ['50%', '75%'],// 相对于容器中心的位置
  radius: '90%'// 仪表盘半径占比
}

通过调整startAngle和endAngle的组合，可实现仪表盘的顺时针/逆时针显示模式，配合radius参数可灵活控制仪表盘大小比例。

圆角进度条

axisLine: {
  roundCap: true,// 启用圆角处理
  lineStyle: {
    width: 20,
    color: [
            [0.25, '#FF6E76'],
            [0.5, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
    ]
  }
}

通过lineStyle.color数组定义分段渐变色值，配合roundCap属性实现圆润过渡效果。建议使用HEX格式颜色以保证渲染精度。

技术细节：

• roundCap 对 SVG 和 Canvas 渲染均生效
• 颜色阈值区间需严格递增（[0, threshold1], [threshold1, threshold2], ...）

指针样式定制

pointer: {
  icon: '',// 清空指针图标
  length: '80%',// 指针长度占比
  width: 20,// 指针线宽
  offsetCenter: [0, '0%']// 指针位置微调
}

去除 icon 的配置，可以使仪表盘禁用个性化样式，采用默认指针

color: 'auto' 实现指针颜色与当前值所在区间同步

动态颜色标签

axisLabel: {
  color: 'inherit',// 颜色继承机制
  fontSize: 20,
  distance: -30,
  rotate: 'tangential',
  formatter: function(value) {
// 根据阈值返回对应等级
    switch(value) {
      case 0.875: return 'Grade A';
      case 0.625: return 'Grade B';
      case 0.375: return 'Grade C';
      case 0.125: return 'Grade D';
      default: return ''
    }
  }
}

关键配置要点：

1. color: 'inherit' 实现分段文字与底色同步
2. rotate: 'tangential' 采用切线方向排版（也可以使用 radial 对齐圆心方向）
3. distance: -30 调整标签与仪表盘边缘的距离

数据展示层

detail: {
  fontSize: 30,
  offsetCenter: [0, '-35%'],
  valueAnimation: true,
  formatter: function(value) {
    return Math.round(value * 100) + '%';// 格式化百分比数值
  }
}

通过valueAnimation: true启用数据更新时的动画效果，formatter函数实现动态数值的格式化展示

隐藏刻度线

axisTick: { length: 0 },   // 隐藏小刻度
splitLine: { length: 0 }   // 隐藏大刻度

总结

完整代码如下：

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '75%'],
      radius: '90%',
      min: 0,
      max: 1,
      splitNumber: 8,
      axisLine: {  
        roundCap: true, // 圆角
        lineStyle: {
          width: 20, //宽度
          color: [
            [0.25, '#FF6E76'],
            [0.5, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      pointer: { 
        icon: '',   // 指针图案
        length: '80%', // 指针长度
        width: 20,
        offsetCenter: [0, '0%'], // 指针偏移位置
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: { // 小刻度
        length: 0,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      splitLine: { // 大刻度
        length: 0,
        lineStyle: {
          color: 'auto',
          width: 5
        }
      },
      axisLabel: {
        // 继承每一段的颜色
        color: 'inherit',
        fontSize: 20,
        distance: -30,
        // 文字排列方式，还有 radial 对齐圆心
        rotate: 'tangential',
        formatter: function (value) {
          if (value === 0.875) {
            return 'Grade A';
          } else if (value === 0.625) {
            return 'Grade B';
          } else if (value === 0.375) {
            return 'Grade C';
          } else if (value === 0.125) {
            return 'Grade D';
          }
          return '';
        }
      },
      title: {
        offsetCenter: [0, '-10%'],
        fontSize: 20
      },
      // 中心文字
      detail: {
        fontSize: 30,
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value * 100) + '';
        },
        color: 'inherit'
      },
      data: [
        {
          value: 0.7,
          name: 'Grade Rating'
        }
      ]
    }
  ]
};

可以在 Echarts 官网中直接运行或者微调：echarts.apache.org/examples/zh…

常见问题解答

如何兼容低版本 ECharts？

• roundCap 需要 v5.0+，旧版本可使用 cap: 'round'

原创声明：转载需注明出处，技术咨询欢迎评论区留言！ 🚀