ApexCharts实现同行多范围区间条形图（适配整数X轴）的方法

同水平行展示多段独立数值范围的效果可直接通过ApexCharts实现。此前出现的拆分独立列的渲染问题，并非整数X轴不支持该能力，而是缺少适配数值轴场景的归集配置，导致图表误将每个独立区间片段识别为单独的Y轴分类。

问题核心原因 #

官方datetime类型X轴的时间线示例，内置了自动归集同分类、同行多区间片段的逻辑。当X轴调整为整数数值类型后，ApexCharts的自动类型推断会切换为数值轴处理模式，默认关闭跨同x值的行归集能力，最终表现为每个区间片段单独占一行，无法完成同分类归集。

必须调整的核心配置 #

在现有配置基础上补充3项设置即可达到预期效果：

• 在plotOptions.bar配置块下开启rangeBarGroupRows: true，强制将x值相同的区间片段归集到同一水平行，不单独拆分行
• 在xaxis配置块中显式声明type: 'numeric'，避免自动推断逻辑把x字段的字符串值（Design/Code等）误判为X轴分类项
• 在yaxis配置块中显式声明type: 'category'，让Y轴自动合并同一系列下相同x字符串的条目为同一个分类刻度

关键配置代码参考 #

plotOptions: {
  bar: {
    horizontal: true,
    barHeight: '80%',
    rangeBarGroupRows: true, // 核心配置：同x值行归集
    distributed: false
  }
},
xaxis: {
  type: 'numeric', // 显式指定为整数数值轴类型
  min: 0,
  max: 10,
  tickAmount: 10
},
yaxis: {
  type: 'category' // 显式指定Y轴为分类轴，支持同x值合并
}

调整后的展示逻辑 #

配置完成后，Bob系列下归属于Design分类的两个独立区间（1-2、4-9）会自动对齐到Design分类的同一水平行展示，其余同分类下的多段区间也会自动归集，完全匹配预期的多段范围展示效果，不需要对原有数据结构做额外转换。

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