gioneves opened a new issue, #19337:
URL: https://github.com/apache/echarts/issues/19337
### 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.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
