Echarts自定义提示框,解决提示框文本位置溢出外部div
程序员文章站
2022-05-31 20:26:30
...
Echarts自定义提示框,解决提示框文本过长时,文本折行,浮窗位置溢出外部div
是不是大家也遇到了这个问题,搜遍了整个网络,头都大了也没有解决,作者今天也是遇到了同样的问题(本人使用Echarts2),但是结合网络上已有的不能解决的方法,找到了一个比较简单的方法,基本上没有什么逻辑,原理很简单,就是让文本折行。
原理:
1、让文字超过多少字时就折行(当然你也可以使用省略号)
2、是数据数字和小数点的话,就不要折行(如果你js扎实,什么效果都能做)
废话不多说,直奔主题,向着大家一贯复制粘贴的做法,上代码,一目了然,不是大神,不足的地方望同行多多指教,谢谢支持!
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;
}
注意事项
-
里面两次for循环,用var变量的话,不要重复声明哦
-
转载请说明出处https://blog.csdn.net/lerayZhang/article/details/81188169,谢谢。
上一篇: JavaScript的三种弹出提示框(alert、confirm、prompt)
下一篇: npm