其他分享
首页 > 其他分享> > Echart的tooltip位置溢出div处理

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