Version
5.2.2
Link to Minimal Reproduction
https://codepen.io/jianyf-jianyf/pen/rNGbgoP
Steps to Reproduce
- create a radar chart with below option
option = {
title: {
text: 'Proportion of Browsers',
subtext: 'Fake Data',
top: 10,
left: 10
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
bottom: 10,
data: (function () {
var list = [];
for (var i = 1; i <= 28; i++) {
list.push(i + 2000 + '');
}
return list;
})()
},
visualMap: {
top: 'middle',
right: 10,
color: ['red', 'yellow'],
calculable: true
},
radar: {
indicator: [
{ text: 'IE8werwrerwrwerwerwerwerwrwerwer-', max: 400 },
{ text: 'IE9+werwrwerwerwerwerwerwerwerwerwerwerwe', max: 400 },
{ text: 'Safari', max: 400 },
{ text: 'Firefox', max: 400 },
{ text: 'Chrome', max: 400 }
],
radius: '35%',
center: ['50%', '50%'],
width: 10,
axisName: {
show: true,
overflow: 'truncate',
ellipsis: '...',
},
},
series: (function () {
var series = [];
for (var i = 1; i <= 28; i++) {
series.push({
type: 'radar',
symbol: 'none',
lineStyle: {
width: 1
},
emphasis: {
areaStyle: {
color: 'rgba(0,250,0,0.3)'
}
},
data: [
{
value: [
(40 - i) * 10,
(38 - i) * 4 + 60,
i * 5 + 10,
i * 9,
(i * i) / 2
],
name: i + 2000 + ''
}
]
});
}
return series;
})()
};Current Behavior
You can see that the indicator text is not truncated
Expected Behavior
Indicator text is truncated normally like this image
Environment
- OS: mac 12.1
- Browser: chrome 95.0.4638.69（正式版本） (x86_64)Any additional comments?
No response
5条答案
按热度按时间w6lpcovy1#
The workaround I've found, I've posted in issue #13551 (comment)
wkyowqbh2#
@Jianyf-Jianyf It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
TITLE
[Bug] Radar chart setting the overflow property of the indicator text has no effect
2w3rbyxf3#
Hi everyone,
do you know anything about this bug?
I have the same issue on "echarts": "^5.3.3",
const dataBJ = 55, 9, 56, 0.46, 18, 6, 1;
const lineStyle = {
width: 1,
opacity: 0.5,
};
const option = {
backgroundColor: 'transparent',
title: {
text: 'Habilidades de Paqui',
left: 'center',
textStyle: {
color: '#eee',
fontStyle: 'normal',
fontFamily: 'Montserrat',
fontSize: 20,
},
},
radar: {
indicator: [
{ name: 'Influencia' },
{ name: 'Autonomía', color: '#FFC759' },
{ name: 'Atención al servicio' },
{ name: 'Disponibilidad', color: '#FFC759' },
{ name: 'Precisión' },
{ name: 'Atención focalizada' },
],
shape: 'circle',
radius: '55%',
splitNumber: 5,
axisName: {
// Color de los labels de las aristas
color: 'white',
fontFamily: 'Montserrat',
overflow: 'truncate',
ellipsis: '...',
},
splitLine: {
lineStyle: {
width: 3,
cap: 'round',
color: [
'#D9D9D914',
'#D9D9D914',
'#D9D9D914',
'#D9D9D914',
'#D9D9D914',
'#FFC759',
],
},
},
splitArea: {
show: false,
},
axisLine: {
lineStyle: {
color: '#E9E9E9',
cap: 'round',
join: 'round',
},
},
},
series: [
{
type: 'radar',
lineStyle: lineStyle,
data: dataBJ,
symbol: 'none',
itemStyle: {
color: '#F9713C',
},
areaStyle: {
opacity: 0.1,
},
},
],
};
yzxexxkh4#
Seems a duplicate of #13551
a8jjtwal5#
+1. The only workaround I've found so far is to make the radar chart smaller using the
radius: