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