使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
来自:http://t.zoukankan.com/zizaiwuyou-p-10637179.html 侵删
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示:
![](https://img2022.cnblogs.com/blog/890760/202209/890760-20220919172119339-1356684336.png)
后来查资料,发现这个标签的文字是可以自定义的,定义方式如下:
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 : '测评结果'
},
]
}]
};
最后效果如下:
![](https://img2022.cnblogs.com/blog/890760/202209/890760-20220919172136608-2038166191.png)
文字超过2个的会自动换行了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步