首页 前端知识 echarts tooltip被遮挡的解决办法

echarts tooltip被遮挡的解决办法

2024-04-29 11:04:52 前端知识 前端哥 372 980 我要收藏

给tooltip设置confine、appendToBody属性,鼠标放在图表最右侧的时候tooltip还是有一部分显示不完整。

看了官网的position属性设置,也可以解决tooltip被遮挡的问题。官网中下面这段代码乍一看有点不解,obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]这里解释一下:obj中第一个数组[left, right]是属性名的集合,第二个数组中的计算结果作为第一个数组的索引值,如pos[0] < size.viewSize[0] / 2为true的时候通过+转换为数字1,即obj[['left', 'right'][1]] = obj['right']。

 position: function (pos, params, dom, rect, size) {
      // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
      var obj = {top: 60};
      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
      return obj;
  }

将上面的计算方式改造一下,给tooltip设置合适的position即可解决被遮挡的问题:

var option = {
	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];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
                x = 10;
            } else { // 左边放的下
                x = pointX - boxWidth;
            }
            
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
                y = 10;
            } else { // 上边放得下
                y = pointY - boxHeight;
            }
            return [x, y];
        },
    },
    ......
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6202.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!