定位echarts的Tooltip展示位置

定位echarts的Tooltip展示位置

由于项目做了滚动条的限制,overflow使用使得里面echarts的tooltip的展示有的展示一半,所以定位展示位置来解决这个问题。

	 tooltip: {
    
    
                    trigger: 'axis',
                    position: function (point, params, dom, rect, size) {
    
    
                        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 = pointX + 10;
                        } else {
    
     // 左边放的下
                            x = pointX - boxWidth - 10;
                        }

                        // boxHeight > pointY 说明鼠标上边放不下提示框
                        if (boxHeight > pointY) {
    
    
                            y = 5;
                        } else {
    
     // 上边放得下
                            y = pointY - boxHeight;
                        }
                        return [x, y];
                    }
                  },

参考:https://blog.csdn.net/wbx_wlg/article/details/122686252

猜你喜欢

转载自blog.csdn.net/qq_43291759/article/details/125395353