来自：http://t.zoukankan.com/zizaiwuyou-p-10637179.html 侵删
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示:
后来查资料,发现这个标签的文字是可以自定义的,定义方式如下:
formatter: function(text){
var strlength = text.length;
if(strlength % 2 == 1){
text = text.replace(/S{2}/g,function(match){
console.log(match);
return match + '
'
})
}else{
text = text.replace(/S{2}/g,function(match){
console.log(match);
return match + '
'
})
strlength = text.length;
text = text.substring(0,strlength - 1);
}
return text
},
完整配置如下:
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
x : 'right',
y : 'top',
data: ['测评结果', ]
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
},
formatter: function(text){
var strlength = text.length;
if(strlength % 2 == 1){
text = text.replace(/S{2}/g,function(match){
console.log(match);
return match + '
'
})
}else{
text = text.replace(/S{2}/g,function(match){
console.log(match);
return match + '
'
})
strlength = text.length;
text = text.substring(0,strlength - 1);
}
return text
},
},
indicator: weidu
},
series: [{
name: '测评结果',
type: 'radar',
// areaStyle: {normal: {}},
data : [
{
value : fenshu,
name : '测评结果'
},
]
}]
};
最后效果如下:
文字超过2个的会自动换行了
标签：文字,function,return,echart,text,strlength,越界,match From： https://www.cnblogs.com/Byme/p/16708395.html