Apache Echarts双value轴下如何设置X轴刻度标签间隔

我有一个X轴与Y轴均为value类型的柱状图，希望设置X轴的刻度标签间隔，使每个数据对应的标签都能显示。但使用axisLabel: { interval: 1 }和axisTick: { interval: 1 }均无效，且因需使用markArea无法将X轴改为category类型。以下是基础代码示例及图表显示效果，请问该如何实现需求？

grid: chartGrid,
title: {
  left: 'center',
},
tooltip: {
  ...
},
toolbox: {
  ...
},
xAxis: {
  type: 'value',
  axisLabel: {
    show: true,
    interval: 1,
    formatter: (value:any, index:any) => {...},
  },
  axisTick: {
    interval:1
  }
},
yAxis: { type: 'value'},

series: {
  name: 'Total',
  type: 'bar',
  itemStyle: {
    borderRadius: [10, 10, 0, 0],
    color: 'rgb(54, 81, 83)',
  },
  barGap: '-100%',
  data: [
      [1,2],
      [3,7],
      [5,6],
      ...
  ],
  large: true,
  markArea: markAreaData,
}

图表显示效果 #

问题核心是value类型X轴的interval参数代表的是数值间隔，而非数据索引间隔，你设置的interval:1只会显示数值差为1的刻度，和你的数据X值（1、3、5...）不匹配，所以无效。要实现需求，按以下方式修改代码：

1. 先从数据中提取所有X值，锁定坐标轴的范围
2. 强制显示所有刻度，再通过过滤仅保留数据对应的标签

具体修改后的配置如下：

// 从series数据中提取所有X值，确定坐标轴范围
const xValues = series.data.map(item => item[0]);
const minX = Math.min(...xValues);
const maxX = Math.max(...xValues);

// 更新xAxis配置
xAxis: {
  type: 'value',
  min: minX, // 限制X轴最小范围为数据最小X值
  max: maxX, // 限制X轴最大范围为数据最大X值
  axisLabel: {
    show: true,
    interval: 0, // 强制显示所有刻度标签
    formatter: (value) => {
      // 仅显示数据中存在的X值，其余用空字符串隐藏
      return xValues.includes(value) ? value : '';
    },
  },
  axisTick: {
    interval: 0, // 显示所有刻度线
    alignWithLabel: true // 让刻度线与标签对齐
  },
  splitLine: {
    show: false // 可选：去掉多余分割线，让图表更整洁
  }
}

该方案保持X轴为value类型，完全兼容markArea的使用，同时能精准显示每个数据对应的X轴刻度标签。

内容的提问来源于stack exchange，提问作者Kaiak