Echarts 自定义 X 轴标签个数

发表于 分类于 阅读次数： 本文字数： 108 阅读时长 ≈ 1 分钟

首先可以阅读 Echarts 官网关于坐标轴的相关知识。

  1. 必须显示 X 轴第一个和最后一个标签
1
2
3
4
5
6
xAxis: {
  axisLabel: {
    showMinLabel: true,
    showMaxLabel: true
  }
}
  1. 显示第一个、最后一个，中间任意个,显示的个数由 num 控制
1
2
3
4
5
6
7
xAxis: {
  axisLabel: {
    showMinLabel: true,
    showMaxLabel: true,
    interval: Math.ceil(data.length / num)
  }
}
  1. 通过格式化的方式实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
xAxis: {
  data: data,
  axisLabel: {
    formatter(val, i) {
      if (
        i === 0 ||
        i === data.length - 1 ||
        i === Math.ceil(data.length / 2)
      ) {
        return val;
      }
      return "";
    },
  },
},