Open
Description
What problem does this feature solve?
Hello!
This is my options of echarts-for-react
const option: EChartsOption = {
tooltip: {
position: 'top',
formatter: (params: any) => {
const { data } = params;
const [timestamp, elapsedTime, failedCount] = data;
const successCount =
successData.find(
(item: [string, string, number]) => item[0] === timestamp && item[1] === elapsedTime,
)?.[2] || 'N/A';
return `Time: ${timestamp} <br />
Elapsed Time: ${elapsedTime} <br />
Success: ${successCount} <br />
Failed: ${failedCount} <br />`;
},
},
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '20%',
},
xAxis: {
type: 'category',
data: xAxisData,
axisLabel: {
interval: 'auto',
showMaxLabel: true,
showMinLabel: true,
},
},
yAxis: {
type: 'category',
data: yAxisData,
},
visualMap: [
{
min: 0,
max: 1000,
calculable: true,
seriesIndex: 0,
orient: 'horizontal',
left: '30%',
bottom: '0%',
inRange: {
color: ['#ffffff', '#00ff00'], // Success 색상 (초록)
},
},
{
min: 0,
max: 100,
calculable: true,
seriesIndex: 1,
orient: 'horizontal',
left: '60%',
bottom: '0%',
inRange: {
color: ['#ffffff', '#ff0000'], // Fail 색상 (빨강)
},
},
],
series: [
{
name: 'success',
type: 'heatmap',
data: successData,
},
{
name: 'failed',
type: 'heatmap',
data: failedData,
itemStyle: {
opacity: 0.5,
},
emphasis: {
itemStyle: {
borderColor: '#333',
borderWidth: 1,
},
},
},
],
};
I want to trigger both visualMap hoverLink when I mouseover to heatmap cell.
But only second visualMap(Failed) hoverLink works.
Please help me.
What does the proposed API look like?
.