成功最有效的方法就是向有经验的人学习!

echarts tooltip过长出现滚动条及不超出屏幕显示

tooltip: {
                trigger: "axis",
                backgroundColor: "#54AEEC", //设置背景图片 rgba格式
                color: "#fff",
                height: "50px",
                padding: [15, 15],
                enterable: true,//滚动条
                extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//滚动条
                textStyle: {
                    color: "white", //设置文字颜色
                    padding: 10,
                    fontSize: 14
                },
                //改变提示框的位置 不超出屏幕显示 
                position: function(point, params, dom, rect, size) {
                //其中point为当前鼠标的位置,
                //size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小
                // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
                    // 提示框位置
                    var x = 0; // x坐标位置
                    var y = 0; // y坐标位置
                    // 当前鼠标位置
                    var pointX = point[0];
                    var pointY = point[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];
                }
            },
赞(0) 打赏
未经允许不得转载:陈桂林博客 » echarts tooltip过长出现滚动条及不超出屏幕显示

大佬们的评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

全新“一站式”建站,高质量、高售后的一条龙服务

橙子建站.极速智能建站8折购买虚拟主机

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏