Echarts的x轴调整间隔,可以用 xAxis数组子项的axisLabel.interval

最新推荐文章于 2025-03-20 16:26:38 发布

kfepiza

最新推荐文章于 2025-03-20 16:26:38 发布

阅读量1.2w

点赞数 2

本文链接：https://blog.csdn.net/kfepiza/article/details/131059459

版权

HTML CSS JS 同时被 2 个专栏收录

85 篇文章

订阅专栏

Js JavaScript ECMAScript

49 篇文章

订阅专栏

文章介绍了如何使用Echarts的xAxis.axisLabel.interval属性来调整x轴标签的显示间隔，包括设置为auto、数字以及使用回调函数自定义间隔逻辑。示例代码展示了不同间隔设置的效果，如每隔一个、两个标签显示一次，以及通过函数控制特定标签显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts的x轴调整间隔,可以用 xAxis数组子项的`axisLabel.interval`

https://echarts.apache.org/zh/option.html#xAxis.axisLabel.interval

xAxis.axisLabel.interval = 'auto' 默认值是’auto’
可设置为 : number 或 Function 数字或函数
坐标轴刻度标签的显示间隔，在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

(index:number, value: string) => boolean 第一个参数是类目的
index，第二个值是类目名称，如果跳过则返回 false。

测试模板

option = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel : {
      interval : 0
    }
  }],
  yAxis: [{
    type: "value"
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
}

在这里插入图片描述

默认值是 ‘auto’

axisLabel : {
  interval : 'auto'
}

在这里插入图片描述

设置数字, 只能用Number数字, 不能用字符串数字"1" , ‘2’, “3”, ‘4’

axisLabel : {
  interval : 1
}

在这里插入图片描述

axisLabel : {
  interval : 2
}

在这里插入图片描述

axisLabel : {
  interval : 3
}

在这里插入图片描述

axisLabel : {
  interval : 4
}

在这里插入图片描述

axisLabel : {
  interval : 5
}

在这里插入图片描述

axisLabel : {
  interval : 6
}

在这里插入图片描述

axisLabel : {
  interval : 999
}

在这里插入图片描述

赋值为回调函数

回调函数会在每个刻度调用,

传入参数一为刻度的索引,从0开始 ;
传入参数二为刻度的名称

option = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel : {
      interval : function(arg0, arg1){ 
        console.log("arg0=", arg0, "arg1=", arg1) 
      }
    }
  }],
  yAxis: [{
    type: "value"
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
}

  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel : {
      interval : function(arg0, arg1){ 
        console.log("arg0=", arg0, "arg1=", arg1) 
      }
    }
  }],

    axisLabel : {
      interval : function(arg0, arg1){ 
        console.log("arg0=", arg0, "arg1=", arg1) 
      }

控制台输出

arg0= 0 arg1= Mon
arg0= 1 arg1= Tue
arg0= 2 arg1= Wed
arg0= 3 arg1= Thu
arg0= 4 arg1= Fri
arg0= 5 arg1= Sat
arg0= 6 arg1= Sun

在这里插入图片描述

  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel : {
      interval : function(arg0, arg1){ 
        return arg0===0 || arg0===6 
      }
    }
  }],

在这里插入图片描述

  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      interval: (idx,name)=> idx!=0 && idx!=6
    }
  }],

在这里插入图片描述

  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      interval: (idx,name)=> name=='Thu'
    }
  }],