Skip to content

[Feature] Is there any way trigger hoverLink of first visualMap in multi series? #20859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jihea-park opened this issue Mar 25, 2025 · 1 comment
Labels
en This issue is in English new-feature pending We are not sure about whether this is a bug/new feature.

Comments

@jihea-park
Copy link

jihea-park commented Mar 25, 2025

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.

Image

What does the proposed API look like?

.

@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. labels Mar 25, 2025
@helgasoft
Copy link

not possible I think, event mouseover is triggered by only one series and shows only on its attached visualMap.
Your first series is practically unreachable by mouse since it is completely overlapped by the second.

@jihea-park jihea-park changed the title [Feature] Is there any way trigger hoverLink of first visualMap? [Feature] Is there any way trigger hoverLink of first visualMap in multi series? Mar 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
en This issue is in English new-feature pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

2 participants