気圧計に存在する 2 つのシリーズに関連付けられた値を返すツールチップ (echarts) を作成しようとしました。最初の系列には 0 から 100 までの値があり、2 番目の系列には 0 から 60 までの値があります。問題は、0 から 100 までの値のみが考慮され、0 から 60 までは考慮されていないことです。
0 から 100 までの系列の値のみを返しますが、各ポインターに対して両方 (0 から 100 と 0 から 60) を返す必要があることがわかります。
これを解決し、各ポインターで両方の値が返されるようにするにはどうすればよいですか?
現在のコード:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<title>Gauge Chart</title>
</head>
<body>
<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">
<script>
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>
</body>
</html>