Echart的tooltip位置溢出div处理
作者:互联网
引用来自:https://blog.csdn.net/sleepwalker_1992/article/details/83023546
设置提示框位置随鼠标移动,并解决提示框显示不全的问题
tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)", position: function(point,params,dom,rect,size){ 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]; var boxHeight = size.contentSize[1]; // boxWidth > pointX 说明鼠标左边放不下提示框 if (boxWidth > pointX) { x = 5; } else { // 左边放的下 x = pointX - boxWidth; } // boxHeight > pointY 说明鼠标上边放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上边放得下 y = pointY - boxHeight; } return [x, y]; }, // position:function(p){ //其中p为当前鼠标的位置 // return [p[0] + 10, p[1] - 10]; // }, textStyle: { //设置文字样式 fontSize: '', }, },
实现效果:
标签:boxHeight,Echart,鼠标,tooltip,pointX,var,div,提示框,size 来源: https://www.cnblogs.com/jiangcaicai/p/15092952.html