You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "gioneves (via GitHub)" <gi...@apache.org> on 2023/11/27 15:38:11 UTC
[I] Return the values of two scales in a tooltip (echarts barometer) [echarts]
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: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Return the values of two scales in a tooltip (echarts barometer) [echarts]
Posted by "gioneves (via GitHub)" <gi...@apache.org>.
gioneves commented on issue #19337:
URL: https://github.com/apache/echarts/issues/19337#issuecomment-1828681421
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.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Return the values of two scales in a tooltip (echarts barometer) [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #19337:
URL: https://github.com/apache/echarts/issues/19337#issuecomment-3614318929
This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Return the values of two scales in a tooltip (echarts barometer) [echarts]
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #19337:
URL: https://github.com/apache/echarts/issues/19337#issuecomment-1829077880
```
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.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Return the values of two scales in a tooltip (echarts barometer) [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #19337:
URL: https://github.com/apache/echarts/issues/19337#issuecomment-3587270552
This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Return the values of two scales in a tooltip (echarts barometer) [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] closed issue #19337: Return the values of two scales in a tooltip (echarts barometer)
URL: https://github.com/apache/echarts/issues/19337
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] Return the values of two scales in a tooltip (echarts barometer) [echarts]
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #19337:
URL: https://github.com/apache/echarts/issues/19337#issuecomment-1828621497
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.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org