Echarts 提示框被遮挡

Echarts提示框(tooltip)浮层位置,不设置时,默认位置会跟随鼠标的位置。 

被遮挡部分如下所示:

从里边给它加回调函数:

tooltip: {
	        trigger: 'axis',
	        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];
				 
				  // 外层div大小
				  // var viewWidth = size.viewSize[0];
				  // var viewHeight = size.viewSize[1];
				 
				  // 提示框大小
				  var boxWidth = size.contentSize[0];
				  var boxHeight = size.contentSize[1];
				 
				  // boxWidth > pointX 说明鼠标左边放不下提示框
				  if (boxWidth > pointX) {
				    x = 120;
				  } else { // 左边放的下
				    x = pointX - boxWidth;
				  }
				 
				  // boxHeight > pointY 说明鼠标上边放不下提示框
				  if (boxHeight > pointY) {
				    y = 5;
				  } else { // 上边放得下
				    y = pointY - boxHeight;
				  }
				 
				  return [x, y];
				}
	    },

修改完后就是这样的

echarts的tooltip可以通过多种方式设置位置。其中一种方式是通过返回一个表示tooltip位置的数组,数组的值可以是绝对像素值或相对百分比。例如,可以设置tooltip的position属性为一个函数,并在函数中返回一个数组来指定tooltip的位置,如['40%', 30]表示在横向距离图表容器左边40%的位置,纵向距离图表容器上边30像素的位置显示tooltip。 另一种设置tooltip位置的方式是直接指定位置值,例如设置position属性为'bottom',表示tooltip显示在图形底侧。 还可以通过回调函数来设置tooltip的位置。其中,回调函数的参数中包含了point、params、dom、rect和size等信息,可以根据这些信息来自定义tooltip的位置。 需要注意的是,size参数表示echarts容器的尺寸,包括外层div的大小和tooltip提示框的大小。通过size参数可以进一步调整tooltip的位置。 综上所述,echarts的tooltip可以通过返回数组、直接指定值或回调函数来设置位置。具体的设置方法可以根据实际需求来选择。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [echarts中tooltip的位置设置](https://blog.csdn.net/weixin_43765747/article/details/122063256)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值