Skip to content

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

Open
@jihea-park

Description

@jihea-park

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?

.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enThis issue is in Englishnew-featurependingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions