Apache Echarts热力图：点击后如何高亮指定X轴值对应的数据行？

不需要拆分系列破坏原有热力图表现，利用ECharts的highlight动作支持指定单系列下多个dataIndex的特性，即可实现单行高亮，具体实现如下：

核心思路 #

1. 点击事件触发时，先取消所有已高亮内容，避免多次点击的高亮叠加；
2. 获取当前点击数据点的X轴标识（索引或名称，根据数据结构调整）；
3. 遍历热力图系列的所有数据，筛选出属于目标X轴行的所有数据点索引；
4. 调用dispatchAction批量高亮这些数据点。

代码示例（适配官方示例数据格式） #

官方示例的热力图数据格式为[[xIndex, yIndex, value], ...]，对应代码如下：

myChart.on('click', function (params) {
    // 取消所有已高亮元素
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
    });

    // 获取当前点击点的X轴索引
    const targetX = params.data[0];
    // 获取当前系列的最新数据
    const seriesData = myChart.getCurrentOption().series[0].data;
    // 筛选目标X轴行对应的所有数据点索引
    const targetIndexes = seriesData.reduce((acc, item, index) => {
        if (item[0] === targetX) {
            acc.push(index);
        }
        return acc;
    }, []);

    // 高亮目标行的所有数据点
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: targetIndexes
    });
});

适配对象格式数据 #

如果你的热力图数据是对象结构（如{x: 'Monday', y: 'Morning', value: 10}），只需调整筛选逻辑：

myChart.on('click', function (params) {
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
    });

    const targetXName = params.data.x;
    const seriesData = myChart.getCurrentOption().series[0].data;
    const targetIndexes = seriesData.reduce((acc, item, index) => {
        if (item.x === targetXName) {
            acc.push(index);
        }
        return acc;
    }, []);

    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: targetIndexes
    });
});

原理说明 #

ECharts的highlight动作并非只能按整个系列操作，它支持在指定seriesIndex的同时，通过dataIndex数组指定该系列内的多个具体数据点，既保留了热力图的原有渲染表现，又实现了单行高亮的需求。

内容的提问来源于stack exchange，提问作者M Matthieu