1.场景：
在开发app时，由于手机宽度不够，雷达图指示器文字太长溢出屏幕，见下图箭头所指：
image.png
2.解决思路：
文字换行显示。按照网上和官方提供的方法，在name里增加formatter: function(text){}，代码如下：
option = {
title: {
text: '基础雷达图'
},
tooltip: {},
legend: {
data: ['长恨歌']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
},
//指示器文字换行 start
formatter: function(text){
var strlength = text.length;
if(strlength % 4 != 0){
text = text.replace(/\S{4}/g,function(match){
console.log(match);
return match + '\n'
})
}else{
text = text.replace(/\S{4}/g,function(match){
console.log(match);
return match + '\n'
});
strlength = text.length;
text = text.substring(0,strlength - 1);
}
return text
}
//指示器文字换行 end
},
indicator: [
{ name: '六宫粉黛无颜色回眸一笑百媚生', max: 6500},
{ name: '天生丽质难自弃一朝选在君王侧', max: 16000},
{ name: '六宫粉黛无颜色回眸一笑百媚生', max: 30000},
{ name: '天生丽质难自弃一朝选在君王侧', max: 38000},
{ name: '六宫粉黛无颜色回眸一笑百媚生', max: 52000},
{ name: '天生丽质难自弃一朝选在君王侧', max: 25000}
]
},
series: [{
name: '长恨歌',
type: 'radar',
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '长恨歌'
}
]
}]
};
效果如下：
image.png
...看到了一个问题，外面文字是换行了，里面由于
\n原因解释成空格了,此时需要再formatter:function (params){}处理一下tooltip：
formatter:function (params){
var names = [
'六宫粉黛无颜色回眸一笑百媚生',
'天生丽质难自弃一朝选在君王侧',
'六宫粉黛无颜色回眸一笑百媚生',
'天生丽质难自弃一朝选在君王侧',
'六宫粉黛无颜色回眸一笑百媚生',
'天生丽质难自弃一朝选在君王侧'
];
var data = '';
for(var i=0; i<params.data.value.length; i++){
data += names[i]+ params.data.value[i]+ '<br/>';
}
return params.data.name+'<br/>'+data;
}
可以了：
image.png
3.完整代码：
option = {
title: {
text: '基础雷达图'
},
tooltip: {
formatter:function (params){
var names = [
'六宫粉黛无颜色回眸一笑百媚生',
'天生丽质难自弃一朝选在君王侧',
'六宫粉黛无颜色回眸一笑百媚生',
'天生丽质难自弃一朝选在君王侧',
'六宫粉黛无颜色回眸一笑百媚生',
'天生丽质难自弃一朝选在君王侧'
];
var data = '';
for(var i=0; i<params.data.value.length; i++){
data += names[i]+ params.data.value[i]+ '<br/>';
}
return params.data.name+'<br/>'+data;
}
},
legend: {
data: ['长恨歌']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
},
//指示器文字换行 start
formatter: function(text){
var strlength = text.length;
if(strlength % 4 != 0){
text = text.replace(/\S{4}/g,function(match){
console.log(match);
return match + '\n'
})
}else{
text = text.replace(/\S{4}/g,function(match){
console.log(match);
return match + '\n'
});
strlength = text.length;
text = text.substring(0,strlength - 1);
}
return text
}
//指示器文字换行 end
},
indicator: [
{ name: '六宫粉黛无颜色回眸一笑百媚生', max: 6500},
{ name: '天生丽质难自弃一朝选在君王侧', max: 16000},
{ name: '六宫粉黛无颜色回眸一笑百媚生', max: 30000},
{ name: '天生丽质难自弃一朝选在君王侧', max: 38000},
{ name: '六宫粉黛无颜色回眸一笑百媚生', max: 52000},
{ name: '天生丽质难自弃一朝选在君王侧', max: 25000}
]
},
series: [{
name: '长恨歌',
type: 'radar',
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '长恨歌'
}
]
}]
};
