本文详解ECharts中X轴与Y轴坐标文字间隔显示的配置方法。针对X轴，通过调整axisLabel.interval实现自动或强制显示；针对Y轴，因interval在类目轴外无效，需结合formatter与splitNumber处理。此外，提供解决柱状图标签溢出显示不全的axisLabel配置及rotate旋转技巧，确保图表可读性。
X轴坐标文字间隔显示配置
以ECharts示例中的折线图为例，当数据量较少时，X轴的类目文字（横坐标）能够完整展示。
修改左侧的option配置，在xAxis的data数组中增加两行数据，同时在series中添加对应数量的值。运行后可见，X轴坐标已根据图形大小自动间隔显示文字。若无特殊需求，此默认行为即可满足内容少时全显、内容多时自动间隔显示的需求。
在option的xAxis配置中添加axisLabel: { interval: 0 }，此设置用于强制横坐标文字全部显示而不进行间隔。再次运行即可看到横坐标内容全部显示，但由于空间有限，文字可能会拥挤在一起。
将间隔值修改为5，即axisLabel: { interval: 5 }，再次运行，即可看到X轴坐标内容已按照指定要求间隔显示。
Y轴坐标文字间隔显示配置
使用上述相同方法设置Y轴文字间隔显示通常无效（官方文档说明axisLabel.interval坐标轴刻度标签的显示间隔仅在类目轴中有效）。可以通过formatter进行设置，并可配合splitNumber使用。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
'Mon1', 'Tue1', 'Wed1', 'Thu1', 'Fri1', 'Sat1', 'Sun1',
'Mon2', 'Tue2', 'Wed2', 'Thu2', 'Fri2', 'Sat2', 'Sun2'],
},
yAxis: {
type: 'value',
splitNumber: 24,
axisLabel:{
formatter: (val,key)=>{
if(key%3 == 0 ){
return val
}
}
}
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
补充：ECharts柱状图X轴刻度间隔显示不全/全部显示问题-xaxis
在初步接触ECharts时，经常遇到柱状图的坐标刻度显示不全的问题，如下图所示：
xAxis : [
{
type : 'category',
data : ['主机故障', '主机连接超时', '水泵流量错误', '水泵离线', '一次潜水泵离线', '温控器离线', '风机离线'],
axisTick: {
alignWithLabel: true
}
}
],
此问题通常由刻度文字过长导致，即文字长度超过了label的显示范围。既然已知问题原因，解决起来便较为容易。
1、在xAxis: [{}]配置中加入axisLabel
控制该显示行为的属性是axisLabel，将其interval设置为0表示强制显示所有标签；设置为1则表示隔一个标签显示一个，依此类推。
xAxis : [
{
axisLabel: {
interval:0,//代表显示所有x轴标签显示
}
}
],2、若仍显示不全，可进一步添加rotate属性
rotate表示倾斜显示，负值表示顺时针旋转多少度，正值或不写表示逆时针旋转多少度，默认值为90。
axisLabel: {
interval:0,//代表显示所有x轴标签显示
rotate:45, //代表逆时针旋转45度
}
总结
到此这篇关于ECharts图形X、Y坐标文字设置间隔显示及相关问题的文章就介绍到这了，更多相关ECharts图形X、Y坐标文字间隔内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！