在我们的日常echarts开发中，经常会遇到 X轴显示不全的问题，解决方法很多，下边我来总结一下（踩过的坑），供小伙伴们参考。
一：问题场景
问题一：
每一个的刻度标签都太长或者要显示的刻度标签数目过多，但是需要把所有的文本全部展示出来。
问题二：
当X轴数目过多的时候，需要坐标轴的刻度标签有间隔的显示。
二：解决方法
基础代码
// #index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>X轴显示不全</title>
// 通过 cdn 库引用 echarts
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #000000;
}
.echarts {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="echarts"></div>
<script src="./index.js"></script>
</body>
</html>
// #index.js
let chartDom = document.querySelector('.echarts');
let myChart = echarts.init(chartDom);
let option;
// 模拟数据
let DataList = [ ['00:00', _random()], ['00:15', _random()], ['00:30', _random()], ['00:45', _random()], ['01:00', _random()], ['01:15', _random()], ['01:30', _random()], ['01:45', _random()], ['02:00', _random()], ['02:15', _random()], ['02:30', _random()], ['02:45', _random()], ['03:00', _random()], ['03:15', _random()], ['03:30', _random()], ['03:45', _random()], ['04:00', _random()], ['04:15', _random()], ['04:30', _random()], ['04:45', _random()], ['05:00', _random()], ['05:15', _random()], ['05:30', _random()], ['05:45', _random()], ['06:00', _random()], ['06:15', _random()], ['06:30', _random()], ['06:45', _random()], ['07:00', _random()], ['07:15', _random()], ['07:30', _random()], ['07:45', _random()], ['08:00', _random()], ['08:15', _random()], ['08:30', _random()], ['08:45', _random()], ['09:00', _random()], ['09:15', _random()], ['09:30', _random()], ['09:45', _random()], ['10:00', _random()], ['10:15', _random()], ['10:30', _random()], ['10:45', _random()], ['11:00', _random()], ['11:15', _random()], ['11:30', _random()], ['11:45', _random()], ['12:00', _random()], ['12:15', _random()], ['12:30', _random()], ['12:45', _random()], ['13:00', _random()], ['13:15', _random()], ['13:30', _random()], ['13:45', _random()], ['14:00', _random()], ['14:15', _random()], ['14:30', _random()], ['14:45', _random()], ['15:00', _random()], ['15:15', _random()], ['15:30', _random()], ['15:45', _random()], ['16:00', _random()], ['16:15', _random()], ['16:30', _random()], ['16:45', _random()], ['17:00', _random()], ['17:15', _random()], ['17:30', _random()], ['17:45', _random()], ['18:00', _random()], ['18:15', _random()], ['18:30', _random()], ['18:45', _random()], ['19:00', _random()], ['19:15', _random()], ['19:30', _random()], ['19:45', _random()], ['20:00', _random()], ['20:15', _random()], ['20:30', _random()], ['20:45', _random()], ['21:00', _random()], ['21:15', _random()], ['21:30', _random()], ['21:45', _random()], ['22:00', _random()], ['22:15', _random()], ['22:30', _random()], ['22:45', _random()], ['23:00', _random()], ['23:15', _random()], ['23:30', _random()], ['23:45', _random()], ['24:00', _random()] ]; let Data = _format(DataList);
// console.log(DataList);
let Data = _format(DataList);
option = {
grid: {
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 30
},
data: Data[0]
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 30
},
splitLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'dashed'
}
}
},
series: [
{
data: Data[1],
type: 'bar'
}
]
};
option && myChart.setOption(option);
/**
* 生成 0-100 的随机数
* @returns 随机数
*/
function _random() {
return Math.round(Math.random() * 100);
}
/**
* 格式化数据，行列装换
* @param {*} data
* @returns
*/
function _format(data) {
let one = [];
let two = [];
data.forEach(function (item) {
one.push(item[0]);
two.push(item[1]);
});
return [one, two];
}
针对问题一的解决方案：
1.使用 xAxis.axisLabel.rotate 设置刻度标签旋转的角度，旋转的角度从 -90 度到 90 度，仅在类目轴中有效。
option = {
xAxis: {
...
// 标签角度转换
rotate: 45
},
data: Data[0]
}
}
2.使用 xAxis.axisLabel.formatter 函数写法设置文本换行。
option = {
xAxis: {
...
formatter: (value, index) => {
// 字符串换行
return value.replace(/(.{3})/g, '$1\n');
},
},
data: Data[0]
}
}
针对问题二的解决方案：
1.使用 xAxis.axisLabel.interval 设置坐标轴刻度标签的显示间隔，可以设置成 0 强制显示所有标签，仅在类目轴中有效。
option = {
...
xAxis: {
...
axisLabel: {
...
// interval 可以定义成数字，但这也会有一个弊端，在不确定数据量的时候，间隔数不好定义，不能随心所欲的控制所要展示的内容
interval: 13,
},
data: Data[0]
}
}
2.使用 xAxis.axisLabel.interval 的函数写法控制刻度标签的显示隐藏，仅在类目轴中有效。 JavaScript
自动换行
option = {
...
xAxis: {
...
axisLabel: {
...
interval: (index, value) => {
// 每逢索引 8 的倍数显示（规则可自定义，只在类目轴中有效）
// 此处返回 true 和 false
return index % 8 == 0;
},
},
data: Data[0]
}
}
3.使用 xAxis.axisLabel.formatter 的函数写法自定义刻度标签的显示隐藏，可作用于所有轴类型。
option = {
...
xAxis: {
...
axisLabel: {
...
formatter: (value, index) => {
// 每逢索引 8 的倍数显示（规则可自定义，在所有轴类型中有效）
// 此处返回要显示的文本
return index % 8 == 0 ? value : '';
},
},
data: Data[0]
}
}
参考：
[1] ECharts官方网站：echarts.apache.org/zh/option.h…
总结
小伙伴们快来举一反三呀。如有更好的想法，欢迎评论区留言。
