echarts鼠标悬停tooltip显示内容的位置自适应

news/2024/7/19 12:54:17 标签: js, echarts

echarts中的option中添加如下代码即可:

tooltip:{
	formatter: function(obj) {
              let value = obj.value;
              return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                value[0] +
                '</div>' +
                 value[1] + '<br>' +
                 value[3] + '<br>';
            },
    position: function(point, params, dom, rect, size) {
              // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
              // 提示框位置
              var x = 0; // x坐标位置
              var y = 0; // y坐标位置

              // 当前鼠标位置
              var pointX = point[0];
              var pointY = point[1];
              // 提示框大小
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];

              // boxWidth > pointX 说明鼠标左边放不下提示框
              if (boxWidth > pointX) {
                x = 5;
              } else { // 左边放的下
                x = pointX - boxWidth;
              }

              // boxHeight > pointY 说明鼠标上边放不下提示框
              if (boxHeight > pointY) {
                y = 5;
              } else { // 上边放得下
                y = pointY - boxHeight;
              }
              return [x, y];
            },

}

http://www.niftyadmin.cn/n/1688981.html

相关文章

CentOS6.8初始配置(3个文件)

初始化CentOS6.8需要配置静态IP&#xff0c;主机名等内容&#xff0c;需要配置以下3个文件内容&#xff1a; 1. 在这里修改网卡的名称&#xff1a;eth0和网卡的物理地址 sudo vi /etc/udev/rules.d/70-persistent-net.rules2. 在这里修改静态IP&#xff0c;主要修改以下内容&…

CentOS6.8配置Hadoop需要的启动脚本、分发脚本等内容(全)

1. 分发脚本: xsync #!/bin/bash #1 获取输入参数个数&#xff0c;如果没有参数&#xff0c;直接退出 pcount$# if((pcount0)); then echo no args; exit; fi#2 获取文件名称 p1$1 fnamebasename $p1 echo fname$fname#3 获取上级目录到绝对路径 pdircd -P $(dirname $p1); pw…

zookeeper启动时日志报错:java.net.NoRouteToHostException: 没有到主机的路由 (Host unreachable)

#重新部署、重新修改配置文件&#xff0c;都不行&#xff0c;看日志文件发现zookeeper启动需要Java运行环境 #而我的Java运行环境配置在了 /etc/profile 中 #可以将java运行环境加在 zookeeper的bin/zkServer.sh 里的开头部分 #最好还是将 /etc/profile中的环境变量加入到…

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon runnin?

问题&#xff1a; 重启虚拟机运行docker命令提示&#xff1a;Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? 解决办法&#xff1a; 重启docker&#xff0c;或者先把docker进程kill掉&#xff0c;然后重启 ps -ef | g…

c#中对cookie的几种操作(增、删、改、查)

1.添加cookies&#xff08;用cookies方式去做sso&#xff0c;用户信息保存&#xff0c;修改都会依赖cookies&#xff09; 添加cookeis #region##///<summary>/// 添加cookeis///</summary>public void AddCookies(){HttpCookie cookies new HttpCookie("P…

layui框架——弹出层layer

两种调用方法&#xff1a; 1、引用独立的layer.js文件 引入好layer.js后&#xff0c;直接用即可 <script src"layer.js"></script> <script> layer.msg(hello); </script> 2、调用layui中的layer模块 layui.use(layer, function(){var …

label两端对齐

<style type"text/css">/*文本两端对齐*/.text-justify {float: left;text-align: justify;width: 200px;}.span-justify {display: inline-block;width: 100%;} </style><label class"text-justify">用 户 名&#xff1a;<span clas…

javascript 异步原理

浏览器只给javascript的执行分配了一个线程&#xff0c;因此它是单线程的&#xff0c;并不能并发执行。javascript的异步处理方法并不是真正的异步&#xff0c;javascript异步的实现是靠事件驱动来实现的 一、在浏览器端 浏览器端的javascript实现了两个很重要的API&#xff0…