一、使用echarts显示x轴文字是发现有的文字不显示,案例如下图,其原因是文本太长导致的。
![](https://img-blog.csdnimg.cn/986a311d548e4e2c8a28026e64073b46.png)
为了让所有文本显示我们可以修改柱状图的配置项interval修改间距,代码如下:
axisLabel:{
interval: 0,
}
interval: 这个属性表示数据之间的间距,默认值为auto,即自动配置间距。
对于柱状图而言,interval 控制的是两根柱子之间的宽度。
对于折线图而言,interval 控制两个数据点之间的宽度。
但这样会让文字重叠,如图2:
![](https://img-blog.csdnimg.cn/983e1a40420d44aa8fb873b86a74c3e1.png)
所以我们可以使用配置项rotate文字旋转一下,代码如下:
axisLabel:{
interval: 0,
rotate: 30
}
rotate:可以让文本旋转,默认值是0。
但这样如果给的范围有限或者文本过长就不适用了,如图3。
![4-10](https://img-blog.csdnimg.cn/e9b05e27046b420a82f6b0200487eac2.png)
二、第二种方法会给xAxis的formatter配置项返回一个字符串来达到,换行显示文本的效果,代码如下:
axisLabel: {
// interval: 0, // 设置这个强制显示所有标签文字
// rotate: 30,
formatter: function (params) {
var newParamsName = '' // 拼接后的新字符串
var paramsNameNumber = params.length // 实际标签数
var provideNumber = 5 // 每行显示的字数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 如需换回,算出要显示的行数
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var i = 0; i < rowNumber; i++) {
var tempStr = '' // 每次截取的字符串
var start = i * provideNumber // 截取位置开始
var end = start + provideNumber // 截取位置结束
if (end > provideNumber * 2) {
newParamsName += '...'
break
// 最后一行的需要单独处理
} else {
if (i === rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber)
} else {
tempStr = params.substring(start, end) + '\n'
}
}
newParamsName += tempStr
}
} else {
newParamsName = params
}
return newParamsName
},
}
效果如图4:
![](https://img-blog.csdnimg.cn/5daf545cfcd24e41970ea7f4c85f67af.png)
我们想要了解这个函数就要先了解formatter的回调函数,它包含两个参数一是当前标签的字符串,二是当前标签的索引。我们通过debugger就可以发现,如图5:
![](https://img-blog.csdnimg.cn/8abe647798024b84bf5a66740a772fc2.png)
它通过遍历x轴标签并逐一返回经过处理的字符串。
当然还有一种简单的方法:
axisLabel: {
// interval: 0, // 设置这个强制显示所有标签文字
// rotate: 30,
formatter: function (params, index) {
const chat = 4 // 想要获取的字节长度
if (params.length > chat) {
return params.substring(0, chat) + '...'
} else {
return params
}
},
}
效果图如图 6: