
問題描述:
如果多個點的位置完全一樣,這時鼠標移動只會顯示最后一個的數據(從前往后渲染,前面的點都被覆蓋了,只能觸碰到最后一個點)
現想要所有的數據都展示出來,怎么搞呢?
解決方案:
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, // 鼠標是否可進入提示框浮層中

最終效果:

