echarts-散點圖點重疊問題(鼠標移入數據展示不全)


 

 

問題描述:

如果多個點的位置完全一樣,這時鼠標移動只會顯示最后一個的數據(從前往后渲染,前面的點都被覆蓋了,只能觸碰到最后一個點)

現想要所有的數據都展示出來,怎么搞呢?

 

解決方案: 

tooltip中的 trigger 設置為'axis',可以把整條線上的數據都顯示出來,只需要拿 當前觸碰的點 的坐標數據 去與 整條線上的數據去做匹配,如果控制點的xy坐標數據都一致的話,那么它們幾個就是重合的點了。

 

 但是現在觸碰返回整條線的數據,怎么知道當前觸碰的誰呢?那么還需要給它綁定個觸碰事件:

 

現在只要拿 this.dotsData 的數據去匹配所有數據,然后把他們都篩選出來就可以了。

 

然后輸出 tooltip 就展示出來了,為了防止數據太長而體驗不好,給它改變一下樣式:

固定它的高,使他超過顯示滾動條,

extraCssText: 'max-height:155px;overflow-y: scroll',

然后把提示框的位置緊貼鼠標,

position: function (point, params, dom, rect, size) { return [point[0], point[1]] },

並讓他進去提示框時不會因為離開點而隱藏,

enterable: true, // 鼠標是否可進入提示框浮層中

 

 

 

最終效果:

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM