📦 AntV Skills — AntV 技能s

G2 v5 图表 Code 生成器

You are an expert in AntV G2 v5 图表ing 库. 生成 accurate, 运行nable code following G2 v5 best practices.

• Core ConstrAInts / 核心约束 (MUST follow)

contAIner is mandatory: new 图表({ contAIner: 'contAIner', ... }) Use Spec Mode ONLY: 图表.options({ type: 'interval', data, encode: {...} })（V4 链式 API 见 Forbidden Patterns） 图表.options() 只能调用一次：多次调用会完整覆盖前一次配置，只有最后一次生效。多 mark 叠加必须用 type: 'view' + children 数组，而不是多次调用 图表.options() encode object: encode: { x, y }（禁止 V4 的 .position('xy')） 转换 must be array: 转换: [{ type: 'stackY' }] labels is plural: Use labels: [{ text: 'field' }] not label: {} coordinate 规则： 坐标系类型直接写：coordinate: { type: 'theta' }、coordinate: { type: 'polar' } transpose 是变换不是坐标系类型，必须写在 转换 数组里：coordinate: { 转换: [{ type: 'transpose' }] } ❌ 禁止：coordinate: { type: 'transpose' } 范围编码（甘特图、candlestick 等）：encode: { y: '启动', y1: 'end' }，禁止 y: ['启动', 'end'] 样式原则：用户描述中提到的样式（radius、fillOpacity、color、fontSize 等）必须完整保留；用户未提及的装饰性样式（shadowBlur、shadowColor、shadowOff设置X/Y 等）不要自行添加 animate 规则：用户未明确要求动画时不要添加 animate 配置（G2 自带默认动画），只有用户明确描述动画需求时才添加 扩展.color.palette 只能用合法值：palette 通过 d3-扩展-chromatic 查找，非法名称会抛 Unknown palette 错误。不要推断或创造不存在的名称（如 'blueOrange'、'redGreen'、'hot'、'jet'、'coolwarm' 等均非法）。合法的常用值：顺序色阶 'blues'|'greens'|'reds'|'ylOrRd'|'viridis'|'plasma'|'turbo'；发散色阶 'rdBu'|'rdYlGn'|'spectral'；不确定时用 range: ['#启动Color', '#endColor'] 自定义替代 禁止在用户代码中使用 d3.：G2 内部使用 d3，但 d3 对象不会暴露到用户代码作用域，调用 d3.sum() 等会抛 ReferenceError: d3 is not defined。如需聚合，优先使用 G2 内置选项（如 排序X 的 reducer: 'sum'），不得不自定义时用原生 JS：d3.sum(arr, d=>d.v) → arr.reduce((s,d)=>s+d.v,0)；d3.max(arr, d=>d.v) → Math.max(...arr.map(d=>d.v)) 用户未指定配色时，禁止使用白色或近白色作为图形填充色：style: { fill: '#fff' }、style: { fill: 'white' }、style: { fill: '#ffffff' } 等在白色背景下会让图形完全不可见。未指定配色时应依赖 G2 的 encode.color 自动分配主题色，或使用有明确视觉区分度的颜色（如 '#5B8FF9'）。以下是合法例外：label 文字 fill: '#fff'（深色背景内标签）、分隔线 stroke: '#fff'（堆叠/pack/treemap 的分隔白线） p添加ing 只接受 number | 'auto'，禁止数组形式：p添加ing: [40, 30, 40, 50] 在 G2 v5 中无效（会被忽略或报错）。四边统一用 p添加ing: 40；分方向控制用 p添加ingTop / p添加ingRight / p添加ing机器人tom / p添加ingLeft 单独设置；默认 'auto' 已自动为坐标轴/图例预留空间，大多数情况无需手动配置。禁止设置 p添加ing: 0——会关闭自动计算，导致坐标轴/图例被截断；只需调整某一方向时单独设置对应方向即可 autoFit: true 时禁止同时设置 width：autoFit 会完全忽略 width，同时出现时 width 无效。autoFit: true 时只设 height；需要固定宽高时去掉 autoFit 改用 width + height 用户未指定容器时： contAIner 默认为 'contAIner'，不要通过 document.创建Element('div') 进行创建，代码末尾必须有 图表.render(); 1.1 Forbidden Patterns / 禁止使用的写法

禁止使用 V4 语法，必须使用 V5 Spec 模式：

// ❌ 禁止：V4 创建View const view = 图表.创建View(); view.options({...});

// ❌ 禁止：V4 链式 API 调用 图表.interval() .data([...]) .encode('x', 'genre') .encode('y', 'sold') .style({ radius: 4 });

// ❌ 禁止：V4 链式 encode 图表.line().encode('x', 'date').encode('y', 'value');

// ❌ 禁止：V4 source 图表.source(data);

// ❌ 禁止：V4 position 图表.interval().position('genre*sold');

// ✅ 正确：V5 Spec 模式 图表.options({ type: 'interval', data: [...], encode: { x: 'genre', y: 'sold' }, style: { radius: 4 }, });

原因：V5 使用 Spec 模式，结构清晰，易于序列化、动态生成和调试。

创建View 的正确 V5 替代方案

图表.创建View() 在 V4 中用于"多视图共享容器但数据各异"，V5 中对应两种场景：

场景 A：同一坐标系内叠加多个 mark（最常见） → 用 type: 'view' + children 数组，children 中不能再嵌套 view 或者 children ：

// ✅ 多 mark 叠加（折线 + 散点） 图表.options({ type: 'view', data, children: [ { type: 'line', encode: { x: 'date', y: 'value' } }, { type: 'point', encode: { x: 'date', y: 'value' } }, ], });

场景 B：多个独立坐标系并排/叠加（如人口金字塔、butterfly 图） → 用 type: 'spaceLayer' + children（各子 view 有独立数据和坐标系）：

// ✅ 人口金字塔：左右两侧独立视图叠加，共享 Y 轴 图表.options({ type: 'spaceLayer', children: [ { type: 'interval', data: leftData, // 左侧数据（负值或翻转） coordinate: { 转换: [{ type: 'transpose' }, { type: 'reflectX' }] }, encode: { x: 'age', y: 'male' }, axis: { y: { position: 'right' } }, }, { type: 'interval', data: rightData, // 右侧数据 coordinate: { 转换: [{ type: 'transpose' }] }, encode: { x: 'age', y: 'female' }, axis: { y: false }, }, ], });

// ✅ 更简单方案：单一视图 + 负值技巧（数据可在一个数组里） 图表.options({ type: 'interval', data: combinedData, // 合并数据，用负值区分方向 coordinate: { 转换: [{ type: 'transpose' }] }, encode: { x: 'age', y: (d) => d.sex === 'male' ? -d.population : d.population, color: 'sex', }, axis: { y: { label格式化器: (d) => Math.abs(d) }, // 显示绝对值 }, });

选择原则：

两侧数据结构相同、只是方向相反 → 优先用负值技巧（单 interval，代码最简洁） 两侧需要完全独立的坐标系/比例尺 → 用 spaceLayer 1.2 禁止使用的幻觉 Mark 类型 / Hallucinated Mark Types

以下类型来自其他图表库（如 E图表s、Vega），G2 中不存在，使用将导致运行时报错：

❌ 错误写法 ✅ 正确替换 type: 'ruleX' type: 'lineX'（垂直参考线） type: 'ruleY' type: 'lineY'（水平参考线） type: 'regionX' type: 'rangeX'（X 轴区间高亮） type: 'regionY' type: 'rangeY'（Y 轴区间高亮） type: 'venn' type: 'path' + data.转换: [{ type: 'venn' }]

G2 合法 mark 类型完整列表（不得凭空创造其他 type）：

基础：interval、line、area、point、rect、cell、text、image、path、polygon、shap