情况: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}},}
}