Return the values ​of two scales in a tooltip (echarts barometer)

[gioneves]

What problem does this feature solve?

I tried to create a tooltip (echarts) that returns the values ​​associated with the two series present in a barometer. The first series has values ​​from 0 to 100 and the second from 0 to 60. The problem is that it is only considering the values ​​from 0 to 100, but not from 0 to 60.

This is my code:

<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"> 

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')
}); 

See that it only returns the values ​​in the series from 0 to 100, but I need both to be returned (0 to 100 and 0 to 60) for each of the pointers.

Expected outcome:

What does the proposed API look like?

In other words, I need to consider this scale (from 0 to 60) as well. Thus, the values ​​in the tooltip for the first pointer would be 50 and 30, as in the image. For the second pointer, the values ​​in the tooltip should be 75 and 45.

[helgasoft]

replace tooltip formatter

      formatter: function(params) {
        const sdata= myChart.getModel().option.series[0].data;
        return '1='+ sdata[0].value +'<br>2='+ sdata[1].value;
      }

📌 please close issue if problem solved.

[gioneves]

It didn't work, I need to return the value as it is in the image I posted. that is, for the first pointer, I need the tooltip values ​​to be 50 and 30 and for the second pointer the tooltip values ​​to be 75 and 45. In other words, it is necessary to consider the two gauges of the barometer.

[helgasoft]

      formatter: function(params) {
        const sdata= myChart.getModel().option.series[0].data;
        return '1='+ sdata[0].value +'/'+sdata[0].value*0.6 
          +'<br>2='+ sdata[1].value +'/'+sdata[1].value*0.6;
      }

📌 please close issue if problem solved.