如何调整ECharts仪表盘进度条方向：从0到100且保留角度位置

要实现进度条从0到100增长且保留原有角度位置，你需要调整以下关键配置（reverse: true并非gauge进度条方向的正确控制属性）：

核心修改点 #

• 恢复正常数值范围：将min设为0、max设为100，让数值逻辑匹配“从0到100增长”的需求。
• 反转轴线方向：添加axisLine.reverse: true，这会让进度条增长方向与默认顺时针相反，契合你想要的效果。
• 调整轴标签显示：移除axisLabel.inverse: true（或设为false），因当前数值范围正常，无需反转标签顺序。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts Gauge Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
  <div id="gaugeChart" style="width: 600px; height: 400px;"></div>
  <script>
    const gaugeData = [{
        value: 20
      },
      {
        value: 40
      }
    ];

    let myChart = echarts.init(document.getElementById('gaugeChart'));

    const option = {
      series: [{
        type: 'gauge',
        startAngle: 120,
        endAngle: -90,
        min: 0,
        max: 100,
        pointer: {
          show: false
        },
        axisLabel: {
          color: 'red'
        },
        axisLine: {
          reverse: true
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false
        },
        data: gaugeData
      }]
    };

    myChart.setOption(option);
  </script>
</body>
</html>

原理说明 #

• axisLine.reverse: true会让仪表盘轴线（及进度条）从endAngle（-90度）向startAngle（120度）延伸，正好实现“从0到100增长”的方向。
• 保留startAngle和endAngle不变，确保刻度的角度位置与原需求一致，不改变整体布局。
• 恢复min和max为0-100，让数值逻辑更直观，避免反向数值范围带来的标签显示问题。

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