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，搞定收工~