用echarts绘制图表时，横坐标数据太多显示不全/堆叠的解决方法

一、横坐标数据过多可能出现的问题

1、横坐标文字堆叠

2、横坐标显示不全

（数据2，数据4，数据6，数据8，数据10，数据12，数据14均没有显示出来）

二、解决方法

1、使用rotate属性给echarts的横坐标标签设置旋转角度

 xAxis: {
            type: 'category',
            data: xAxis,
            axisLabel: {
                interval: 0, // 显示所有标签
                rotate: 45 // 调整倾斜角度
            }
        },

效果图：数据可以全部显示

 

2、如果横坐标每个值都很长，设置旋转角度之后会导致页面失衡，则使用formatter方法省略部分文字

页面失衡示例：

解决方法：

xAxis: {
            type: 'category',
            data: xAxis,
            axisLabel: {
                formatter: function(value) {
                    // 设置最大显示长度
                    var maxLength = 4;
                    // 如果文字长度超过最大长度，则进行截断并添加省略号
                    if (value.length > maxLength) {
                        return value.substring(0, maxLength) + '...';
                    } else {
                        // 如果没有超过最大长度，则正常显示
                        return value;
                    }
                },
                interval: 0, // 显示所有标签
                rotate: 45 // 调整倾斜角度
            }
        },

解决问题后效果图：仅显示四个字符，剩下用省略号表示