随身笔记
随身笔记

echarts的tooltip超出屏幕可视范围

解决前

https://sdeno.com/wp-content/uploads/2024/03/QQ截图20240314103228.png

 

解决后

https://sdeno.com/wp-content/uploads/2024/03/QQ截图20240314103241.png

 

tooltip: {
   position: function (point, params, dom, rect, size) {
             // 获取可视区域的宽度和高度
             const viewWidth = size.viewSize[0];
             const viewHeight = size.viewSize[1];

             // 获取提示框内容的宽度和高度
             const tooltipWidth = dom.offsetWidth;
             const tooltipHeight = dom.offsetHeight;

             // 设置提示框的位置
             let left = point[0];
             let top = point[1];

             // 判断提示框是否超出可视范围,如果超出则调整位置
             if (left + tooltipWidth > viewWidth) {
               left = viewWidth - tooltipWidth;
             }
             if (top + tooltipHeight > viewHeight) {
               top = viewHeight - tooltipHeight;
             }

             return [left, top];
           },
}

 

tooltip 的浮窗要可以点击

https://sdeno.com/wp-content/uploads/2024/03/QQ截图20240314171610.png
tooltip: {
           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 boxHight = size.contentSize[1];

             //说明鼠标左边放不下提示框
             if(boxWidth > pointX){
               x = 5;
             }else{//左边下一点
               x = pointX - boxWidth;
             }
             //说明鼠标上边放不下提示框
             if(boxHight > pointY){
               y = 5;
             }else{//上边下一点
               y = pointY - boxHight;
             }

             return [x,y];
           },
           trigger: "item",
           enterable: true,
}

 

 

 

随身笔记

echarts的tooltip超出屏幕可视范围
解决前   解决后   tooltip: { position: function (point, params, dom, rect, size) { // 获取可视区域的宽度和高度 con…
扫描二维码继续阅读
2024-03-14