返回工具提示中两个刻度的值（echarts 晴雨表）

Question

我尝试创建一个工具提示（echarts），它返回与气压计中存在的两个系列相关的值。第一个系列的值从0到100，第二个系列的值从0到60。问题是它只考虑从0到100的值，而不考虑从0到60的值。

这是我的代码：

const mychartspider1 = echarts.init(document.getElementById('gaugespiderinc1'));

function updateGaugeSpider1(value1, value2) {
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        if (params.seriesIndex === 0) {
          return params.seriesName + '<br>' + params.value.toFixed(2) + '%';
        } else if (params.seriesIndex === 1) {
          return params.seriesName + '<br>' + value2.toFixed(0);
        }
      }
    },
    series: [{
        type: 'gauge',
        min: 0,
        max: 100,
        splitNumber: 10,
        radius: '80%',
        axisLine: {
          lineStyle: {
            color: [
              [1, '#008cba']
            ],
            width: 3
          }
        },
        splitLine: {
          distance: -18,
          length: 18,
          lineStyle: {
            color: '#008cba'
          }
        },
        axisTick: {
          distance: -12,
          length: 10,
          lineStyle: {
            color: '#008cba'
          }
        },
        axisLabel: {
          distance: -40,
          color: '#008cba',
          fontSize: 20,
          fontFamily: 'Lato' // Adicionado fontFamily
        },
        anchor: {
          show: true,
          size: 20,
          itemStyle: {
            borderColor: '#000',
            borderWidth: 2
          }
        },
        pointer: {
          offsetCenter: [0, '10%'],
          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: '115%'
        },
        detail: {
          valueAnimation: true,
          precision: 1,
          formatter: '{value}%',
          padding: [2, 1, 5, 2],
          borderRadius: 5,
          color: '#333333',
          fontFamily: 'Lato',
          backgroundColor: '#92a192'
        },
        title: {
          offsetCenter: [0, '-50%'],
          fontFamily: 'Lato'
        },
        data: [{
            value: value1,
            name: 'PRESSURE1',
            title: {
              color: 'orange',
              offsetCenter: ['0%', '-50%'],
              fontFamily: 'Lato',
              fontWeight: 'bolder'
            },
            detail: {
              offsetCenter: ['-40%', '110%'],
              fontFamily: 'Lato',
              borderWidth: 3,
              borderColor: 'orange'
            },
            itemStyle: {
              color: 'orange',
              borderWidth: 1,
              borderColor: '#858383'
            }
          },
          {
            value: value2,
            name: 'PRESSURE2',
            title: {
              color: 'green',
              offsetCenter: ['0%', '-30%'],
              fontFamily: 'Lato',
              fontWeight: 'bolder'
            },
            detail: {
              offsetCenter: ['40%', '110%'],
              fontFamily: 'Lato',
              borderWidth: 3,
              borderColor: 'green',
              color: '#333333'
            },
            itemStyle: {
              color: 'green',
              borderWidth: 1,
              borderColor: '#858383'
            }
          }
        ]
      },
      {
        type: 'gauge',
        min: 0,
        max: 60,
        splitNumber: 6,
        axisLine: {
          lineStyle: {
            color: [
              [1, '#858383']
            ],
            width: 3
          }
        },
        splitLine: {
          distance: -2,
          length: 18,
          lineStyle: {
            color: '#858383'
          }
        },
        axisTick: {
          distance: 0,
          length: 10,
          lineStyle: {
            color: '#858383'
          }
        },
        axisLabel: {
          distance: 10,
          fontSize: 25,
          color: '#858383'
        },
        pointer: {
          show: false
        },
        title: {
          show: false
        },
        anchor: {
          show: true,
          size: 14,
          itemStyle: {
            color: 'red'
          }
        }
      }
    ]
  };

  mychartspider1.setOption(option);
}

function updategaugespider1() {
  $('#sliderspidervalue1').text($('#number1').val());
  $('#sliderspidervalue2').text($('#number2').val());
}

updategaugespider1();
updateGaugeSpider1(Number($('#number1').val()), Number($('#number2').val()));

$('#number1').on('input', function() {
  updategaugespider1();
  updateGaugeSpider1(Number($(this).val()), Number($('#number2').val()));
});

$('#number2').on('input', function() {
  updategaugespider1();
  updateGaugeSpider1(Number($('#number1').val()), Number($(this).val()));
});

/// event click
mychartspider1.on('click', {
  dataIndex: 0
}, function(params) {
  alert('clicked')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<div id="gaugespiderinc1" style="height: 400px; margin: 0 auto"></div>
<input type="range" id="number1" min="0" max="100" step="1" value="50">
<input type="range" id="number2" min="0" max="100" step="1" value="75">

看到它只返回从 0 到 100 的系列中的值，但我需要为每个指针返回两者（0 到 100 和 0 到 60）。

预期结果：

Answer 1

这里是一个应该有效的示例：

formatter: function(params) {
   return Math.round((value1 / 60) * 100) + " % <br>" + value1 + " %";
}