echarts堆疊圖tooltip中如何僅展示鼠標當前位置相應的指標數據

堆疊圖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;
    },
}

 

 本文轉自 https://segmentfault.com/a/1190000012246231

如果有更好的方法歡迎指出