在 Echarts 中让 x 轴文字竖着排列有以下几种实现方法：
#### 方法一：使用`formatter`函数将文字按字符拆分并换行显示
```javascript
option = {
xAxis: {
type: 'category',
data: ['消防烟感', '摄像机', '环境烟感', '路灯', '地磁'],
axisLabel: {
formatter: function (value) {
return value.split("").join("\n");
}
}
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70],
type: 'bar'
}]
};
```
这种方法通过`formatter`函数将 x 轴的每个标签拆分成单个字符，然后用换行符`\n`连接起来，实现文字竖着排列的效果，适用于需要精确控制每个字符竖向显示的场景，常见于柱状图、折线图等[^1]。
#### 方法二：处理长文本并在超出一定长度时显示省略号
```javascript
option = {
xAxis: {
type: 'category',
data: ['很长很长的标签', '普通标签', '另一个长标签'],
axisLabel: {
formatter: function (value) {
if (value.length > 3) {
let str = `${value.slice(0, 3)}`;
str = str.split("");
return (str.join("\n") + "\n" + '...');
} else {
let str = value.split("");
return str.join("\n");
}
}
}
},
yAxis: {
type: 'value'
},
series: [{
data: [100, 200, 300],
type: 'bar'
}]
};
```
该方法在方法一的基础上增加了对长文本的处理，当标签长度超过 3 个字符时，截取前 3 个字符并竖向显示，后面加上省略号，适用于 x 轴标签可能较长的情况，避免标签显示拥挤[^2]。
#### 方法三：结合其他配置隐藏 X 轴轴线和刻度线
```javascript
option = {
xAxis: {
data: ['消防烟感', '摄像机', '环境烟感', '路灯', '地磁'],
axisLine: {
show: false // 隐藏 X 轴轴线
},
axisTick: {
show: false // 隐藏 X 轴刻度线
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(77, 128, 254, 0.2)"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#65D5FF" // X 轴文字颜色
},
interval: 0,
formatter: function (value) {
var str = value.split("");
return str.join("\n");
}
}
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70],
type: 'bar'
}]
};
```
此方法在实现 x 轴文字竖向显示的同时，隐藏了 X 轴的轴线和刻度线，并对分割线和文字颜色等进行了配置，适用于需要对图表整体样式进行定制的场景，如追求简洁风格的可视化展示[^3]。
#### 方法四：按指定字数换行显示
```javascript
option = {
xAxis: [
{
type: "category",
axisTick: {
show: false
},
splitLine: {
show: false
},
data: ['长标签示例', '短标签', '另一个长标签'],
axisLabel: {
show: true,
interval: 0,
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 1; // 一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
},
textStyle: {
color: "#6861a6" // 文字颜色
}
}
}
],
yAxis: {
type: 'value'
},
series: [{
data: [100, 200, 300],
type: 'bar'
}]
};
```
该方法可以根据指定的字数将 x 轴标签进行换行显示，适用于需要统一控制标签换行规则的场景，如标签长度差异较大时，使显示更加整齐[^4]。
本文介绍了Echarts在面对x轴文本过长时的解决策略，包括自动换行、文本旋转和省略显示。通过示例代码展示如何设置配置，以优化图表的可读性和美观性。
订阅专栏 解锁全文
扫一扫
2355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
