有时候我们会遇到x轴标签过于长的情况,会导致显示不全
示例代码
option: {
xAxis: {
type: 'category',
data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [80, 67, 42, 58, 40, 30, 56]
}
]
}
方案1:文字旋转角度
xAxis: {
type: 'category',
data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签'],
axisLabel: {
// 旋转角度
rotate: 15
}
}
方案2:文字换行
xAxis: {
type: 'category',
data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签'],
axisLabel: {
formatter: val => {
let result= ''
const textLength = val.length
const limitNumber = 4 // 一行显示几个字
if (textLength > limitNumber) {
for (var i = 0; i < textLength; i += limitNumber) {
result += val.substring(i, i + limitNumber) + '\n'
}
result = result.trim() // 移除最后一个换行符
} else {
result = val
}
return result
}
}
}
方案3:在柱条中显示
xAxis: {
show: false, // 隐藏x轴标签
type: 'category',
data: ['长长的标签', '长长长的标签', '长长长长长的标签', '长的标签', '长长长长的标签', '长长长的标签', '长长长长长长的标签']
}
series: [
{
type: 'bar',
data: [80, 67, 42, 58, 40, 10, 56],
label: {
// 显示label代替x轴标签
show: true,
position: 'insideBottom',
formatter: params => {
return params['name'].split('').join('\n')
}
}
}
]