echart相关: tooltip.position

本文详细解析了Echarts中tooltip.position的用法,包括如何设置提示框的位置,如跟随鼠标、图形内部中心、图形上下左右侧。示例展示了使用数组、回调函数等方式自定义tooltip的位置。
摘要由CSDN通过智能技术生成

此处,距离上侧:跟随鼠标移动;左右方向:鼠标在左tooltip在右;反之在左。

 
tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} 个(占比:{d}%)",
                position: function(point, params, dom, rect, size){
                  //鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧
                  var obj = {top: point[1]};
                  obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = 5;
                  return obj;
                }
              },
官网API: 提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。

可选:

  • Array

    通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置。

    示例:

      // 绝对位置,相对于容器左侧 10px, 上侧 10 px
      position: [10, 10]
      // 相对位置,放置在容器正中间
      position: ['50%', '50%']
  • Function

可以通过设置`tooltip.position`属性来控制提示框的位置,使其不超出图形。具体来说,可以将`tooltip.position`设置为函数,然后在函数中计算提示框的位置,使其不超出图形。 以下是一个示例: ```javascript option = { // ... tooltip: { position: function (point, params, dom, rect, size) { // 获取提示框的宽度和高度 var width = size.contentSize[0]; var height = size.contentSize[1]; // 计算提示框的左上角坐标 var x = point[0] - width / 2; var y = point[1] - height - 10; // 判断提示框是否超出图形 if (x < rect.x) { x = rect.x; } else if (x + width > rect.x + rect.width) { x = rect.x + rect.width - width; } if (y < rect.y) { y = rect.y; } else if (y + height > rect.y + rect.height) { y = rect.y + rect.height - height; } // 返回提示框的位置 return [x, y]; } }, // ... }; ``` 在上面的示例中,我们定义了一个函数来计算提示框的位置,该函数接受五个参数: - `point`:提示框的中心点坐标,格式为 `[x, y]`。 - `params`:数据项的信息。 - `dom`:提示框的 DOM 元素。 - `rect`:图形区域的位置和大小。 - `size`:提示框内容的大小。 首先,我们通过 `size.contentSize` 获取提示框的宽度和高度。然后,我们计算提示框的左上角坐标 `x` 和 `y`,使其在中心点的上方,并且水平居中。接着,我们判断提示框是否超出了图形区域,如果超出了则将其位置调整到图形区域的边缘。最后,我们将计算得到的位置作为数组返回。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值