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: '',
                        },
                    },

  实现效果:

Echart的tooltip位置溢出div处理

 

上一篇:echarts 悬浮框tooltip 添加点击事件


下一篇:echarts —— tooltip 鼠标悬浮显示提示框属性