天天看點

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處理

從啥也不會開始吧