欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Echarts自定义提示框,解决提示框文本位置溢出外部div

程序员文章站 2022-05-31 20:26:30
...

Echarts自定义提示框,解决提示框文本过长时,文本折行,浮窗位置溢出外部div

是不是大家也遇到了这个问题,搜遍了整个网络,头都大了也没有解决,作者今天也是遇到了同样的问题(本人使用Echarts2),但是结合网络上已有的不能解决的方法,找到了一个比较简单的方法,基本上没有什么逻辑,原理很简单,就是让文本折行。

原理:

1、让文字超过多少字时就折行(当然你也可以使用省略号)

2、是数据数字和小数点的话,就不要折行(如果你js扎实,什么效果都能做)

废话不多说,直奔主题,向着大家一贯复制粘贴的做法,上代码,一目了然,不是大神,不足的地方望同行多多指教,谢谢支持!

Echarts自定义提示框,解决提示框文本位置溢出外部div

formatter: function(params) {
    console.log(params) 
    var res = '<div><p style="color:#fff">时间:' + params[0].name + '</p></div>'
    for (let i = 0; i < params.length; i++) {
        console.log(params[i].data) 
        if (params[i].data != "") {
            let str = params[i].seriesName + ':' + params[i].data;
            let arr = str.split('');
            for (let j = 9; j < arr.length; j += 10) //超过13个字换行
            {
                if (isNaN(arr[j]) == true && arr[j] != '.') { //如果是数字和小数点就不换行
                    arr[j] += '</br>';
                } else {
                    arr[j] += '';
                }
            }
            str = arr.join("") 
            res += '<p style="color:#fff">' + str + '</p>'
        }
    }
    return res;
}

注意事项