[Bug]: 图例展示异常

[lxfu1]

Describe the bug / 问题描述

图例缺失

{
  const config = {
    "type": "view",
    "scale": {},
    "children": [
        {
            "data": [
                {
                    "time": "202501",
                    "value": 0.4846223623220571,
                    "type": "prediction_score_2ca3d1cb/通用3m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.prediction_score",
                    "originValue": 0.4846223623220571
                },
                {
                    "time": "202501",
                    "value": 0.5241715962498887,
                    "type": "prediction_score_2ca3d1cb/通用1m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.prediction_score",
                    "originValue": 0.5241715962498887
                },
                {
                    "time": "202501",
                    "value": 0.4073719140751409,
                    "type": "final_prob_2ca3d1cb/通用3m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.final_prob",
                    "originValue": 0.4073719140751409
                },
                {
                    "time": "202501",
                    "value": 0.428439604901525,
                    "type": "final_prob_2ca3d1cb/通用1m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.final_prob",
                    "originValue": 0.428439604901525
                },
                {
                    "time": "202502",
                    "value": 0.48549450926322646,
                    "type": "prediction_score_2ca3d1cb/通用3m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.prediction_score",
                    "originValue": 0.48549450926322646
                },
                {
                    "time": "202502",
                    "value": 0.5119367768314642,
                    "type": "prediction_score_2ca3d1cb/通用1m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.prediction_score",
                    "originValue": 0.5119367768314642
                },
                {
                    "time": "202502",
                    "value": 0.4065108130743259,
                    "type": "final_prob_2ca3d1cb/通用3m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.final_prob",
                    "originValue": 0.4065108130743259
                },
                {
                    "time": "202502",
                    "value": 0.41804945688452333,
                    "type": "final_prob_2ca3d1cb/通用1m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.final_prob",
                    "originValue": 0.41804945688452333
                },
                {
                    "time": "202503",
                    "value": 0.5035093885244725,
                    "type": "prediction_score_2ca3d1cb/通用3m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.prediction_score",
                    "originValue": 0.5035093885244725
                },
                {
                    "time": "202503",
                    "value": 0.5310100823455524,
                    "type": "prediction_score_2ca3d1cb/通用1m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.prediction_score",
                    "originValue": 0.5310100823455524
                },
                {
                    "time": "202503",
                    "value": 0.4353751688533189,
                    "type": "final_prob_2ca3d1cb/通用3m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.final_prob",
                    "originValue": 0.4353751688533189
                },
                {
                    "time": "202503",
                    "value": 0.4443267368092356,
                    "type": "final_prob_2ca3d1cb/通用1m30d_身份证号/整体/yx_mybk_rm_dev.x_375693_dq_v6_pred_1204_2_0_30_2.final_prob",
                    "originValue": 0.4443267368092356
                }
            ],
            "type": "line",
            "style": {
                "lineWidth": 2
            },
            "axis": {
                "x": {
                    "labelAutoHide": true,
                    "labelAutoRotate": false,
                    "title": false
                },
                "y": {
                    "title": false,
                    "tick": false
                }
            },
            "height": 300,
            "scale": {
                "y": {
                    "domainMin": 0,
                    "key": "child0Scale",
                    "independent": true,
                    "nice": true
                }
            },
            "overlapHide": true,
            "scaleConfig": {},
            "interaction": {
                "tooltip": {}
            },
            "legend": {
                "cols": 1,
                "orientation": "vertical",
                "position": "left",
                "color": true
            },
            "encode": {
                "x": "time",
                "y": "value",
                "color": "type"
            },
            "labels": [
                {
                    "__transform__": true,
                    "style": {
                        "dy": -10,
                        "textAlign": "middle"
                    },
                    "transform": [
                        {
                            "type": "overlapHide"
                        }
                    ]
                }
            ]
        }
    ]
}

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@lxfu1 您好！以下是关于您问题的自动回复：

感谢您的反馈和详细配置！针对 “图例展示异常（图例缺失）” 的问题，结合您提供的 G2 配置和常见原因，给您如下分析与建议：

---

🕵️ 问题分析

1. 数据维度与 color 编码
   您的 line 图 encode 配置为 "color": "type"，数据中 type 字段有多个取值，理论上应该能正常分组并自动生成图例。

2. legend 配置
   您采用了如下 legend 设置（位于 mark 层）：

   "legend": {
     "cols": 1,
     "orientation": "vertical",
     "position": "left",
     "color": true
   }

   这使图例应该显示在左侧，并且开启了 color 图例。

3. 可能影响图例显示的因素

   • 图例被禁用：如 legend 配置为 false 或 color: false 时会导致不显示。
   • color 编码为常量/函数返回值异常：会导致图例无法自动生成。
   • 样式/布局问题：图例可能被遮挡或空间不足。
   • 嵌套视图/组合 mark 时 legend 继承或合并异常。
   • G2 版本兼容性或 bug。

---

✅ 建议与排查方向

1. 检查 legend 配置层级与合并

建议将 legend 配置提升至最外层 view，而不是 children 内部 mark 层。如下：

{
  type: 'view',
  legend: {
    color: {
      cols: 1,
      orientation: 'vertical',
      position: 'left',
    }
  },
  // children: [...]
}

原因：G2 推荐 legend 在 view 层声明，自动合并到所有 marks，避免内部层级冲突。

---

2. color 编码方式确认

请确保 encode.color 显式为字段名（如 "type"），而非常量或异常函数。如：

encode: {
  x: 'time',
  y: 'value',
  color: 'type'
}

如果用了函数表达式，请确认返回的值是可区分的字符串或类别。

---

3. 图例空间与样式

• 确保 legend 的 position（如 'left'）有足够空间，不被 chart 容器裁剪。
• 试着临时去掉 cols、orientation，仅设置 position 看是否出现图例。

---

4. 逐步最小化复现

• 用同样数据和 encode/color/legend 配置，单独写一个最小 demo，确认 legend 是否正常出现。
• 排除其它 children、嵌套 view、复杂 scale/axis 配置的干扰。

---

5. G2 依赖和版本

• 确认 G2 版本为最新的 v5，或与官方文档一致。
• 若用封装二次开发库（如 G2Plot），需参考其 legend 适配方式。

---

🛠️ 示例修正配置

推荐 legend 配置方式：

{
  type: 'view',
  legend: {
    color: {
      position: 'left',
      orientation: 'vertical',
      cols: 1
    }
  },
  children: [
    {
      type: 'line',
      data: [...],
      encode: {
        x: 'time',
        y: 'value',
        color: 'type'
      },
      // 其余配置...
    }
  ]
}

---

🚩 常见误区提醒

• 若 legend: false 或 legend: { color: false }，图例会被关闭。
• encode.color 必须为字段名或类别函数，不能为常量或 undefined。
• legend 的 position/cols 设置不当时，可能因空间不足而被隐藏。

---

🧩 进一步协助

如以上方法仍无法解决，请补充：

• G2 具体版本号
• 复现环境（浏览器/Node 版本）
• 浏览器控制台是否有报错
• 是否能提供最小可运行 demo

---

参考链接

• G2 图例配置文档（Legend）
• G2 编码映射说明（Encode）

---

如有其他疑问，欢迎继续反馈！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。