如何在ECharts柱状图中添加自动读取数据集的第二X轴

要实现自动读取数据集标签的第二个X轴，你之前的配置只声明了type: "category"，但缺少数据源绑定和轴位置配置，导致无法正常显示。以下是具体解决方案：

核心修改步骤 #

• 绑定数据源：通过datasetIndex和dimension让轴自动读取数据集的指定列，或者直接设置data数组；
• 调整轴位置：设置position和offset避免与第一个X轴重叠；
• 优化标签显示：可选配置axisLabel解决标签重叠问题。

具体配置示例 #

假设你的数据集结构包含第二个X轴的标签列（比如第三列），修改xAxis数组如下：

xAxis: [
  // 第一个X轴（原有配置）
  {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // 第二个X轴（新增配置）
  {
    type: 'category',
    datasetIndex: 0, // 指定使用第0个数据集
    dimension: 2, // 读取数据集的第2个维度（从0开始计数）作为标签
    position: 'bottom', // 轴位置在底部
    offset: 30, // 与第一个轴的偏移量，避免重叠
    axisLabel: {
      rotate: 30, // 标签旋转30度，防止文字重叠
      color: '#666' // 区分第一个轴的标签颜色
    }
  }
]

如果你的数据集是独立的data数组而非dataset格式，也可以直接给第二个轴赋值：

{
  type: 'category',
  data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], // 直接传入标签数组
  position: 'bottom',
  offset: 30
}

关键说明 #

• 如果某个系列需要关联第二个X轴，只需在该系列配置中添加xAxisIndex: 1（索引从0开始）；
• 若未指定数据源，ECharts无法自动获取标签，这是你之前配置无效的核心原因。

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