注意：Markdown 模式下，内容区必须写首行 vis <type>，与纯 Syntax 模式格式一致。
代码模式
根据目标框架生成完整可运行代码。
安装方式
NPM：
npm install @antv/gpt-vis
import { GPTVis } from '@antv/gpt-vis';
CDN：
<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
CDN 引入后通过 GPTVis.GPTVis 访问主类。
HTML 完整示例
<html>
<head>
<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
const gptVis = new GPTVis.GPTVis({
container: '#container',
width: 600,
height: 400,
});
gptVis.render(`
vis line
data
- time 2020
value 100
- time 2021
value 120
title 年度趋势
`);
</script>
</body>
</html>
图表类型配置
通用配置
所有图表均包含以下字段，后续各图表类型定义中省略这些字段。各小节标题即为 type 值（如 line、column），对应上方图表类型表中的 type 列。
{ type: string; title?: string; theme?: 'default' | 'light' | 'dark' | 'academy'; style?: { backgroundColor?: string; palette?: string[] } }
line / area
{ data: { time: string | number; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; style?: { lineWidth?: number } }
stack 仅 area 支持。
column / bar
{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; group?: boolean }
pie
value 不可使用百分比数字。
{ data: { category: string; value: number }[]; innerRadius?: number }
innerRadius 设为 0.6 变为环图。
scatter
{ data: { x: number; y: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string }
dual-axes
{ categories: string[]; series: { type: 'line' | 'column'; data: number[]; axisYTitle?: string }[]; axisXTitle?: string; style?: { startAtZero?: boolean } }
histogram
{ data: number[]; binNumber?: number; axisXTitle?: string; axisYTitle?: string }
boxplot / violin
同一 category 需多条数据以展示分布。
{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; style?: { startAtZero?: boolean } }
radar
{ data: { name: string; value: number; group?: string }[]; align?: boolean }
align: 是否对齐各维度比例尺，默认 false（各轴独立缩放）；true 时所有轴共享同一最大值，适合多系列绝对数值对比。
funnel
{ data: { category: string; value: number; }[]; }
waterfall
value 可为负数表示减少。palette 为色板数组，顺序为 [正值色, 负值色, 汇总色]。
{ data: { category: string; value: number }[]; axisXTitle?: string; axisYTitle?: string; style?: { palette?: string[] } }
liquid
percent 范围 0~1。
{ percent: number; shape?: 'rect' | 'circle' | 'pin' | 'triangle' }
word-cloud
{ data: { text: string; value: number; }[]; }
venn
交集用逗号分隔集合标识：sets: "A,B"。label 用于显示图表上对应集合的名称
{ data: { sets: string | string[]; value: number; label?: string }[] }
treemap
type TreeNode = { name: string; value: number; children?: TreeNode[] };
{ data: TreeNode[] }
sankey
{ data: { source: string; target: string; value: number }[]; nodeAlign?: 'left' | 'center' | 'right' | 'justify' }
flow-diagram / network-graph
source/target 引用节点的 name。
type GraphData = { nodes: { name: string }[]; edges: { source: string; target: string; name?: string }[] };
// flow-diagram
{ data: GraphData }
// network-graph
{ data: GraphData; layout?: 'force' | 'circular' | 'grid' | 'radial' | 'concentric' | 'dagre' }
mindmap / indented-tree / organization-chart
type TreeData = { name: string; children?: TreeData[] };
// mindmap
{ data: TreeData; direction?: 'H' | 'LR' | 'RL' }
// indented-tree
{ data: TreeData; direction?: 'LR' | 'RL' | 'H' }
// organization-chart
type OrganizationChartData = {
name: string;
description?: string;
children?: OrganizationChartData[];
};
{ data: OrganizationChartData }
mindmap 默认 'H'，indented-tree 默认 'LR'。
fishbone-diagram
type FishboneNode = { name: string; children?: FishboneNode[] };
{ data: FishboneNode; style?: { texture?: 'rough' | 'default' } }
texture: 'rough' 为手绘风格。
table
{ data: Record<string, string | number>[]; }
summary
summary 与其他图表类型完全不同：不使用 Syntax/JSON 配置，而是使用 T8 语法（Markdown + 语义标注）。
⚠️ 生成 summary 前必须：先读取 references/summary.md 获取 T8 语法规则、完整实体类型列表、属性字段定义、生成要求和示例，然后再生成内容。跳过此步骤将导致语法错误。
最佳实践
- 饼图分类不超过 5 个，超过建议合并为"其它"或改用条形图
- 不要用饼图展示趋势，不要用折线图展示无序分类
- 数值字段必须是数字类型，分类字段必须是文本类型
- 连续数值的分布（如薪资、成绩、年龄）必须用直方图（histogram）
- 多维数据字段映射：有两个分类维度时，x 轴维度写
time/category，另一个写 group
- 语法模式优先用 Syntax 格式（流式友好）
- 代码模式默认生成 HTML + CDN 方案（零安装），用户指定框架时再用 npm 方案
