如何使用Vega-Lite创建含线条与标记的自定义图例

完全可以实现你需要的自定义图例和配色效果，以下是具体实现思路和修改要点：

一、统一配色方案 #

1. 在图表的config中定义全局配色映射，确保所有图层的系列颜色和目标图例一致：

"config": {
  "color": {
    "scale": {
      "domain": ["Group A", "Group B", "Group C", "Line Metric"], // 替换为你的实际系列名称
      "range": ["#2E86AB", "#F2D7EE", "#92C7CF", "#F76F8E"] // 自定义匹配目标图例的配色
    }
  }
}

2. 也可以在单个图层的color编码中直接指定颜色，确保每个系列的颜色唯一且匹配图例样式。

二、自定义图例样式与布局 #

1. 区分图表类型的图例符号：针对柱状图（堆叠/聚类）和折线图，分别设置图例符号样式：
   • 柱状图系列：设置symbolType: 'square'匹配方块标记
   • 折线图系列：设置symbolType: 'stroke'并调整strokeWidth模拟线条标记
     示例代码片段：

{
  "mark": "line",
  "encoding": {
    "color": {
      "field": "line_metric",
      "legend": {
        "symbolType": "stroke",
        "strokeWidth": 4,
        "label": "Line Metric"
      }
    }
  }
}

2. 分组图例布局：如果需要像目标图例那样分组展示（堆叠/聚类柱状图为一组，折线图为一组），可通过两种方式实现：
   • 简易方式：在config的legend中设置columns: 2，让图例分为两列，调整系列顺序实现分组效果；
   • 精准匹配方式：用concat组件单独创建图例区域，通过text标记添加分组标题、symbol标记对应颜色，再和主图表拼接，这种方式自由度更高，完全贴合自定义图例的样式需求。

三、结合现有代码的修改建议 #

1. 先梳理现有代码中所有需要展示在图例中的系列名称，统一添加到color的domain中，对应设置range颜色；
2. 针对每个图层的legend配置，调整符号类型、大小、标签等样式，确保和目标图例一致；
3. 次Y轴的折线图图例可单独设置title或调整位置，强化区分度。

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