如何在SAP Analytics Cloud自定义仪表组件代码中添加双指针？

要给你的ECharts仪表盘添加双指针，只需要对现有代码做以下几处关键修改：

• 将pointer配置从单个对象改为数组，每个数组元素对应一个指针的样式配置
• 在data数组中添加第二个数据项，对应第二个指针的数值
• 可选：调整指针样式（颜色、偏移、图标）来区分两个指针，修改详情面板同时显示两个数值

以下是修改后的完整代码：

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 240,
      splitNumber: 12,
      progress: {
        show: true,
        roundCap: true,
        width: 18
      },
      // 双指针配置：数组形式，每个元素对应一个独立指针
      pointer: [
        {
          icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
          length: '75%',
          width: 16,
          offsetCenter: [0, '5%'],
          itemStyle: {
            color: '#009AA6',
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        },
        {
          icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
          length: '65%',
          width: 14,
          offsetCenter: [0, '5%'],
          itemStyle: {
            color: '#FF6B6B',
            shadowColor: 'rgba(255,107,107,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }
      ],
      axisLine: {
        roundCap: true,
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        splitNumber: 2,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        length: 12,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 30,
        color: '#999',
        fontSize: 20
      },
      title: {
        show: false
      },
      detail: {
        backgroundColor: '#fff',
        borderColor: '#999',
        borderWidth: 2,
        width: '80%',
        lineHeight: 70,
        height: 50,
        borderRadius: 8,
        offsetCenter: [0, '35%'],
        valueAnimation: true,
        // 修改 formatter 同时显示两个指针的数值
        formatter: function (values) {
          return '{val1|' + values[0].toFixed(0) + '%}{split| / }{val2|' + values[1].toFixed(0) + '%}';
        },
        rich: {
          val1: {
            fontSize: 28,
            fontWeight: 'bolder',
            color: '#009AA6'
          },
          val2: {
            fontSize: 28,
            fontWeight: 'bolder',
            color: '#FF6B6B'
          },
          split: {
            fontSize: 28,
            color: '#999'
          }
        }
      },
      // 添加第二个数据项，对应第二个指针的数值
      data: [
        { value: 100 },
        { value: 160 }
      ]
    }
  ]
};

关键修改说明： #

1. 双指针配置：将原单个pointer对象改为数组，每个数组元素独立配置指针的大小、颜色、阴影等样式，这里把第二个指针设为更短、更细的红色样式，和第一个指针明确区分。
2. 数据项扩展：在data数组中添加第二个对象，设置第二个指针的目标数值。
3. 详情面板优化：修改detail.formatter，接收values数组（对应所有指针的数值），用富文本格式分别显示两个数值，并匹配对应指针的颜色。
4. 样式分离：将原全局的itemStyle移到每个指针的配置里，确保两个指针的样式完全独立。

修改后的代码可直接在SAP Analytics Cloud的自定义组件中使用，双指针会分别指向对应的数据值，样式区分清晰。

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