Vega-Lite分面图表优化：双列布局与标签防重叠设置

解决columns参数未生效问题 #

• columns必须放在**facet的顶级配置层级**，不能嵌套在row或column子字段里。无论你用的是行分面还是列分面，这个参数都会控制分面面板的每行显示数量。
• 正确配置示例：

{
  "facet": {
    "row": {"field": "你的分面字段"},
    "columns": 2  // 关键：直接放在facet根节点下
  },
  // 其余图表配置
}

设置标签内边距解决重叠 #

通过config.header分别为水平、垂直分面标签设置内边距：

• 水平标签（列分面）：用column.header.labelPadding设置5px内边距
• 垂直标签（行分面）：用row.header.labelPadding设置2px内边距
• 配置示例：

{
  "config": {
    "header": {
      "column": {"labelPadding": 5},
      "row": {"labelPadding": 2}
    }
  },
  // 其余图表配置
}

完整可运行示例 #

{
  "data": {"values": [
    {"category": "A", "x": 1, "y": 10},
    {"category": "A", "x": 2, "y": 20},
    {"category": "B", "x": 1, "y": 15},
    {"category": "B", "x": 2, "y": 25},
    {"category": "C", "x": 1, "y": 8},
    {"category": "C", "x": 2, "y": 18},
    {"category": "D", "x": 1, "y": 12},
    {"category": "D", "x": 2, "y": 22}
  ]},
  "facet": {
    "row": {"field": "category"},
    "columns": 2
  },
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "x", "type": "quantitative"},
      "y": {"field": "y", "type": "quantitative"}
    }
  },
  "config": {
    "header": {
      "row": {"labelPadding": 2},
      "column": {"labelPadding": 5}
    }
  }
}

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