• 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, // 鼠标是否可进入提示框浮层中

    最终效果:

     

  • 相关阅读:
    jquery 将一组元素转换成数组
    QT5之三大重要窗体
    OSG消息传递机制分析
    OSG消息机制之消息分析
    OSG消息机制之事件处理概述
    OSG 3D场景渲染编程概述
    数据结构之中缀表达式转为后缀
    数据结构之小括号匹配
    考研复习策略
    数据结构之图
  • 原文地址:https://www.cnblogs.com/listen9436/p/12883284.html
Copyright © 2020-2023  润新知