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

    最终效果:

     

  • 相关阅读:
    jq获取img高度(动态生成的image高度为0原因)
    Idea集成使用SVN教程
    RPC框架pigeon源码分析
    java多线程面试题整理及答案
    深入理解JVM线程模型
    dubbo 2.8.4(dubbox)的jar包制作【添加到maven本地仓库】
    【学习】027 Dubbo
    【学习】026 Zookeeper
    【学习】025 RocketMQ
    【学习】024 springCloud
  • 原文地址:https://www.cnblogs.com/listen9436/p/12883284.html
Copyright © 2020-2023  润新知