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

8次阅读

共计 778 个字符，预计需要花费 2 分钟才能阅读完成。

 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];
          },
        },

正文完