項目創建到現在快小半年了，期間遇到了大大小小非常多的問題，在不斷遇到問題和解決問題的過程中，對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做比較，找出鼠標位置對應的seriessum += 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，搞定收工~

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的echarts堆叠图tooltip中如何仅展示鼠标当前位置相应的指标数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。