情况:Y轴内容是文字,内容太长可能会系那是不全。调整grid会导致短数据前的留白过于多。
解决方案:
方法一: 首先可以配置grid自适应 , containLabel 属性设置true (这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。)
grid: {
top: '0%',
left: '3%',
right: '2%',
bottom: '3%',
containLabel: true
},
方法二:将文字设置超出部分显示省略号;在yAxis中的axisLabel中加入以下属性配置:
yAxis: {
axisLabel: {
width: 60,//将内容的宽度固定
overflow: 'truncate',//超出的部分截断
truncate: '...',//截断的部分用...代替
}
}
方法三: 如果是数字,可将数字进行处理;axisLabel 的formatter 进行处理
yAxis: {
axisLabel: {
formatter(v) {
v = v.toString()
if (v >= 100000000000) {
return (v.substring(0, 5) / 10) + '亿'
} else if (v >= 10000000000) {
return (v.substring(0, 4) / 10) + '亿'
} else if (v >= 1000000000) {
return (v.substring(0, 3) / 10) + '亿'
} else if (v >= 100000000) {
return (v.substring(0, 2) / 10) + '亿'
} else if (v >= 10000000) {
return v.substring(0, 4) + '万'
} else if (v >= 1000000) {
return v.substring(0, 3) + '万'
} else if (v >= 100000) {
return v.substring(0, 2) + '万'
} else if (v >= 10000) {
return (v.substring(0, 2) / 10) + '万'
} else if (v >= 1000) {
return v
} else {
return v
}
},
}
}