Vega-Lite 环形图（Arc）文本标签堆叠问题求助

问题根源 #

你的文本标签全部堆叠在一起，核心原因是文本标记层没有配置theta编码——Vega-Lite不知道该把每个文本对应到对应扇形的角度位置，所以所有文本默认渲染在圆心位置。另外第三个渐变arc层的theta配置也有问题，用了aggregate:"sum"会导致它变成一个完整的环形，失去分层遮罩的效果。

修复后的完整配置 #

{
  "data": {
    "values": [
      {"Fuel Type": "Diesel", "Counter": 252675},
      {"Fuel Type": "Electric", "Counter": 53691},
      {"Fuel Type": "Hybrid Diesel / PlugIn Electric", "Counter": 1076},
      {"Fuel Type": "Hybrid Petrol / PlugIn Electric", "Counter": 24155},
      {"Fuel Type": "Petrol", "Counter": 82828}
    ]
  },
  "layer": [
    {
      "mark": {
        "type": "arc",
        "outerRadius": 70,
        "innerRadius": 50,
        "cornerRadius": 3,
        "padAngle": 0.02
      },
      "encoding": {
        "theta": {"field": "Counter", "type": "quantitative", "stack": true},
        "color": {
          "field": "Fuel Type",
          "type": "nominal",
          "legend": {
            "orient": "right",
            "title": null
          },
          "scale": {
            "domain": ["Diesel", "Electric", "Hybrid Diesel / PlugIn Electric","Hybrid Petrol / PlugIn Electric", "Petrol"],
            "range": ["#FCA674", "#FAF26E","#EA91FF","#C60073","#BBD4FF"]
          }
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "radius": 80,
        "color": "#333333" // 改成深色提升可读性
      },
      "encoding": {
        "text": {"field": "Counter", "type": "quantitative", "format": ","}, // 给数值加千分位格式化
        "theta": {"field": "Counter", "type": "quantitative", "stack": true} // 关键：添加theta编码，和arc层配置一致
      }
    },
    {
      "mark": {
        "type": "arc",
        "outerRadius": 70,
        "innerRadius": 50,
        "cornerRadius": 10,
        "padAngle": 0.02,
        "color": {
              "x1": 0.5,
              "y1": 0.5,
              "x2": 0.5,
              "y2": 0.5,
              "r1": 0.5,
              "r2": 0.25,
              "gradient": "radial",
              "stops": [
                {
                  "offset": 0,
                  "color": "rgba(0, 0, 0, 0)"
                },
                {
                  "offset": 1,
                  "color": "rgba(0, 0, 0, 0.75)"
                }
              ]
            }
      },
      "encoding": {
        "theta": {"field": "Counter", "type": "quantitative", "stack": true} // 修复：去掉sum聚合，和其他层保持配置一致
      }
    }
  ]
}

关键修改说明 #

• 文本层添加theta编码：完全复用第一个arc层的theta配置，确保每个文本对应到所属扇形的角度位置，自动排列在环形外侧。
• 优化文本可读性：调整文本颜色为深色，给数值添加千分位格式化，让标签更清晰易读。
• 修复渐变arc层：将aggregate:"sum"改为stack:true，让渐变层和底层环形的分段匹配，保持分层遮罩的视觉效果。

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