echartsX轴文字样式控制

一、使用echarts显示x轴文字是发现有的文字不显示，案例如下图，其原因是文本太长导致的。

1 图

为了让所有文本显示我们可以修改柱状图的配置项interval修改间距，代码如下：

axisLabel:{
  interval: 0,
}
interval: 这个属性表示数据之间的间距，默认值为auto，即自动配置间距。
对于柱状图而言，interval 控制的是两根柱子之间的宽度。
对于折线图而言，interval 控制两个数据点之间的宽度。 

但这样会让文字重叠，如图2：

2 图

所以我们可以使用配置项rotate文字旋转一下，代码如下：

axisLabel:{
  interval: 0,
  rotate: 30
}
rotate：可以让文本旋转，默认值是0。

但这样如果给的范围有限或者文本过长就不适用了，如图3。

3 图

 

 二、第二种方法会给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：

4 图

我们想要了解这个函数就要先了解formatter的回调函数，它包含两个参数一是当前标签的字符串，二是当前标签的索引。我们通过debugger就可以发现，如图5：

5图

 它通过遍历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：