echarts堆叠图tooltip中如何仅展现鼠标当前位置相应的指标数据

项目建立到如今快小半年了，期间遇到了大大小小很是多的问题，在不断遇到问题和解决问题的过程当中，对vue和element-ui还有echarts的认知一点点的加深，也累积了很多对应各类问题的奇技淫巧。记录一下。

这篇记录一个使用echarts时遇到的实际问题。

堆叠图tooltip问题

echarts生成的堆叠图，鼠标浮动时默认会将相应位置的全部指标信息所有展现出来：

当指标特别多的时候，这样的鼠标浮动提示信息会失去其说明数据的意义：

用户没法从浮动提示中一眼就辨认出他想看的那个指标在某个区间的具体数值，甚至能够说，要从这个浮动提示中找出指定区域对应的数值是件想一想就使人头皮发麻的事情（尤为对于色弱的我来讲T_T）。

这种状况下，比较合适的作法是鼠标移动到哪一个位置，就只显示当前位置对应的指标数据。

惋惜翻遍echarts文档也没找到这个需求的相关配置项。只好本身另谋出路。

问题必定和tooltip的formatter相关，只要在formatter方法中找出鼠标位置所在区域对应的series，问题就能迎刃而解。然而问题的答案却不在formatter这个方法内部，echarts提供的formatter参数中，只是一个包含全部series数据的数组，没法定位具体是哪一个series。

为获取这个信息，目光须要转移到能获取这个信息的其余配置项上——tooltip.axisPointer

当tooltip.axisPointer.type为cross时，tooltip.axisPointer.label.formatter方法的参数是个二维数组，而数组的第一项，记录着鼠标所对应的yAxis的数据。并且值得庆幸的是，tooltip.axisPointer.label.formatter将会先于tooltip.formatter触发，这让我有机会获取到这个关键信息，将其存到外部变量mouseCurValue中，而后在tooltip.formatter方法使用它。

axisPointer: {
    type: "cross",
    label: {
        formatter: function (params) {
            if (params.seriesData.length === 0) {
                // 就是这里，能够获取到我想要的那个数据
                mouseCurValue = params.value;
            }
        }
    }
},

有了mouseCurValue，就能计算鼠标当前位置究竟落在哪个series中了。回到tooltip.formatter方法，tooltip.formatter的数组参数parameters是个有序数组，即越靠近x轴的线所对应的series，在数组中的位置越靠前。因此只要遍历数组并累加其data数值，而后与mouseCurValue对比，当这个累积数一旦超过或等于mouseCurValue，那么当前series即对应鼠标当前位置。

formatter: function (params) {
    let res = "", sum = 0;

    // 先取消全部当前dataIndex点的高亮
    if (chartInstance && params.length > 0) {
        chartInstance.dispatchAction({
            type: "downplay",
            dataIndex: params[0].dataIndex
        });
    }

    for (let i = 0; i < params.length; i++) {
        let series = params[i];
        // 累计series.data，与mouseCurValue作比较，找出鼠标位置对应的series
        sum += Number(series.data);
        if (sum >= mouseCurValue) {
            res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>";

            // 再高亮当前鼠标所在区域所表明的点
            if (chartInstance) {
                chartInstance.dispatchAction({
                    type: "highlight",
                    seriesIndex: series.seriesIndex,
                    dataIndex: series.dataIndex
                });
            }
            break;
        }
    }
    return res;
}

代码中还添加了触发downplay和highlight事件，避免echarts默认事件将全部在当前范围的点所有高亮。

用下面代码在http://echarts.baidu.com/demo...echarts官网实例上替换掉原有tooltip属性后验证可行

tooltip : {
    trigger: 'axis',
    axisPointer: {
        type: "cross",
        label: {
            formatter: function (params) {
                if (params.seriesData.length === 0) {
                    window.mouseCurValue = params.value;
                }
            }
        }
    },
    formatter: function (params) {
        let res = "", sum = 0;
        for (let i = 0; i < params.length; i++) {
            let series = params[i];
            sum += Number(series.data);
            if (sum >= window.mouseCurValue) {
                res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>";
                break;
            }
        }
        return res;
    },
}

剩下的一些显示问题官网上都有相关配置。OK，搞定收工~