图片中的文本情况与横坐标的文本更改方法一致
yAxis中的axisLabel里面有个属性是: width,但可能不生效,因此可以使用formatter函数,这里介绍两种方法: 超出换行和超出省略号显示
超出换行显示
yAxis: {
type: 'category',
inverse: true,
axisLabel: {
formatter:function(value){
var result = "";//拼接加\n返回的类目项
var maxLength = 10;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowNumber > 1) { //如果文字大于3,
for (var i = 0; i < rowNumber ; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
temp = value.substring(start, end) + "\n";
result += temp; //拼接生成最终的字符串
}
return result ;
}
else {
return value;
}
},
fontSize: 14,
color: '#333',
width: 1,//
overflow: 'truncate'//
},
}
超出显示省略号
yAxis: {
type: 'category',
inverse: true,
axisLabel: {
formatter(value){
var maxLength = 10;//每项显示文字个数
if (value.length > maxLength) { //如果文字大于3,
value = value.slice(0, 10) + "..."
return value ;
}
else {
return value;
}
},
fontSize: 14,
color: '#333',
width: 1, //
overflow: 'truncate'//
},
}