[English](./README.md) | 简体中文
```javascript
import { GPTVis, isVisSyntax } from '@antv/gpt-vis';
const gptVis = new GPTVis({ container: 'container', width: 600, height: 400 });
let buffer = '';
function onToken(token) {
buffer += token;
if (isVisSyntax(buffer)) {
gptVis.render(buffer);
}
}
```
## 📚 语法指南
`render()` 支持两种输入格式：对象配置（适合程序化调用）和 DSL 语法（适合 LLM 流式生成）。
### 对象配置
直接传入 JSON 对象，适合程序化图表创建：
**折线图：**
```javascript
gptVis.render({
type: 'line',
data: [
{ time: '2020', value: 100 },
{ time: '2021', value: 120 },
{ time: '2022', value: 150 },
],
});
```
**饼图：**
```javascript
gptVis.render({
type: 'pie',
data: [
{ category: 'Android', value: 72 },
{ category: 'iOS', value: 28 },
],
innerRadius: 0.6,
});
```
**主题：**
内置三套主题，通过 `theme` 属性切换：
| 主题 | 标识 | 背景色 | 色板 |
| ------------ | --------- | ------ | ----------------------------------------------------- |
| 默认（亮色） | `default` | `#FFF` | `#1783FF` `#F08F56` `#D580FF` `#00C9C9` `#7863FF` ... |
| 暗色 | `dark` | `#000` | `#1783FF` `#F08F56` `#D580FF` `#00C9C9` `#7863FF` ... |
| 学术 | `academy` | `#FFF` | `#4e79a7` `#f28e2c` `#e15759` `#76b7b2` `#59a14f` ... |
```javascript
gptVis.render({
type: 'line',
data: [
{ time: '2020', value: 100 },
{ time: '2021', value: 120 },
],
theme: 'dark',
});
```
**自定义样式：**
```javascript
gptVis.render({
type: 'line',
data: [
{ time: '2020', value: 100 },
{ time: '2021', value: 120 },
],
style: { lineWidth: 3, palette: ['#5B8FF9', '#5AD8A6'] },
});
```
### DSL 语法
类 Markdown 的声明式语法，LLM 无需学习复杂 API 即可生成：
```
vis [图表类型]
[属性] [值]
data
- [字段] [值]
```
**饼图：**
```
vis pie
data
- category 销售
value 30
- category 市场
value 25
innerRadius 0.6
```
**主题：**
```
vis line
data
- time 2020
value 100
- time 2021
value 120
theme dark
```
**自定义样式：**
通过 `style` 设置线宽、自定义配色等：
```
vis line
data
- time 2020
value 100
- time 2021
value 120
style
lineWidth 3
palette
- #5B8FF9
- #5AD8A6
```
**包含空格的值用引号包裹：**
```
vis pie
data
- category "Q1 销售额"
value 30
- category "Q2 销售额"
value 25
```
**层级数据：**
```
vis mindmap
data
- name 项目规划
children
- name 第一阶段
- name 第二阶段
```
**使用 DSL 语法渲染：**
```javascript
const visSyntax = `
vis line
data
- time 2020
value 100
- time 2021
value 120
- time 2022
value 150
`;
gptVis.render(visSyntax);
```
## 📊 图表类型
支持 26 种图表，覆盖统计分析、关系网络、文本可视化三大类。
### 统计图表（18 种）
| 图表 | 类型标识 |
| -------- | ------------ |
| 折线图 | `line` |
| 面积图 | `area` |
| 柱状图 | `column` |
| 条形图 | `bar` |
| 饼图 | `pie` |
| 散点图 | `scatter` |
| 雷达图 | `radar` |
| 漏斗图 | `funnel` |
| 瀑布图 | `waterfall` |
| 双轴图 | `dual-axes` |
| 直方图 | `histogram` |
| 箱线图 | `boxplot` |
| 小提琴图 | `violin` |
| 韦恩图 | `venn` |
| 桑基图 | `sankey` |
| 树图 | `treemap` |
| 词云 | `word-cloud` |
| 水波图 | `liquid` |
### 关系图表（6 种）
| 图表 | 类型标识 |
| ---------- | -------------------- |
| 流程图 | `flow-diagram` |
| 网络图 | `network-graph` |
| 思维导图 | `mindmap` |
| 缩进树 | `indented-tree` |
| 组织架构图 | `organization-chart` |
| 鱼骨图 | `fishbone-diagram` |
### 文本可视化（2 种）
| 图表 | 类型标识 |
| -------- | --------- |
| 表格 | `table` |
| 文本摘要 | `summary` |
查看全部示例 → [图表示例](https://gpt-vis.antv.vision/examples)
## 🔧 框架集成