基于Vega-Lite创建展示同比/环比变化及收支利润差异的图表

核心需求实现要点 #

• 展示收入、支出、利润的当前值与上年同期差异
• 针对支出维度反转颜色逻辑：支出减少（差异为负）显示正向色彩，支出增加（差异为正）显示负向色彩
• 支持切换年度/月度对比（仅需调整数据时间维度即可）

数据结构示例 #

假设我们的结构化数据如下（替换字段即可适配月度数据）：

[
  {"category": "收入", "current_value": 120000, "last_year_value": 100000, "diff": 20000, "diff_percent": 20},
  {"category": "支出", "current_value": 55000, "last_year_value": 60000, "diff": -5000, "diff_percent": -8.3},
  {"category": "利润", "current_value": 65000, "last_year_value": 40000, "diff": 25000, "diff_percent": 62.5}
]

完整Vega-Lite配置代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "收入", "current_value": 120000, "last_year_value": 100000, "diff": 20000, "diff_percent": 20},
      {"category": "支出", "current_value": 55000, "last_year_value": 60000, "diff": -5000, "diff_percent": -8.3},
      {"category": "利润", "current_value": 65000, "last_year_value": 40000, "diff": 25000, "diff_percent": 62.5}
    ]
  },
  "encoding": {
    "y": {
      "field": "category",
      "type": "nominal",
      "axis": {"labelFontSize": 12, "title": null}
    },
    "x": {
      "field": "current_value",
      "type": "quantitative",
      "axis": {"title": "金额", "format": ","}
    }
  },
  "layer": [
    // 主柱状图：显示当前金额
    {
      "mark": {"type": "bar", "color": "#e2e2e2", "width": 40}
    },
    // 差异百分比标注：带颜色区分变化好坏
    {
      "mark": {"type": "text", "align": "left", "xOffset": 10, "fontSize": 12},
      "encoding": {
        "text": {
          "field": "diff_percent",
          "type": "quantitative",
          "format": "+.1f%"
        },
        "color": {
          "condition": [
            // 支出专属逻辑：减少（负差异）绿，增加（正差异）红
            {"test": "datum.category === '支出' && datum.diff < 0", "value": "#2ecc71"},
            {"test": "datum.category === '支出' && datum.diff > 0", "value": "#e74c3c"},
            // 收入/利润常规逻辑：增长（正差异）绿，下降（负差异）红
            {"test": "datum.diff > 0", "value": "#2ecc71"},
            {"test": "datum.diff < 0", "value": "#e74c3c"}
          ],
          "value": "#666"
        }
      }
    },
    // 当前金额文本标注
    {
      "mark": {"type": "text", "align": "right", "xOffset": -10, "fontSize": 12, "fontWeight": "bold"},
      "encoding": {
        "text": {
          "field": "current_value",
          "type": "quantitative",
          "format": ","
        }
      }
    }
  ],
  "config": {
    "view": {"stroke": null},
    "axis": {"grid": false}
  }
}

关键细节说明 #

1. 支出颜色反转逻辑
   通过condition条件编码单独处理支出类别：支出减少（差异为负）用绿色标识正向优化，支出增加（差异为正）用红色标识风险，和收入、利润的常规色彩逻辑完全反转。

2. 数值与差异展示
   采用三层可视化元素：灰色柱状图展示当前金额规模，左侧加粗文本标注具体数值，右侧带符号的百分比文本标注同比变化，信息层级清晰。

3. 时间维度切换
   若需展示上月对比，仅需将数据中的last_year_value替换为上月数值，重新计算diff（当前值-上月值）和diff_percent（差异/上月值*100）即可，图表配置无需修改。

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