关于javascript:echarts-tooltip-悬浮窗无遮挡

echarts tooltip 悬浮窗无遮挡

 tooltip: {
          // 鼠标是否能够进入悬浮框
          // 触发形式 mousemove, click, none, mousemove|click
          triggerOn: `mousemove|click`,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器,坐标轴触发无效
            type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
          },

          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] / 3;
            var boxHeight = size.contentSize[1] / 3;

            // boxWidth > pointX 阐明鼠标右边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 右边放的下
               if (pointX > size.contentSize[0]) {
                x = pointX - size.contentSize[0];
              } else {
                x = pointX - boxWidth;
              }
            }

            // boxHeight > pointY 阐明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
        },

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理