chart-visualization

name chart-visualization description 推荐并生成合适的数据可视化图表，使用 GPT-Vis 库。支持两种输出模式：（1）语法模式——生成 Syntax 或 JSON 配置；（2）代码模式——生成完整的运行代码。支持 26 种图表类型。 图表可视化技能 步骤 意图识别 ：根据用户意图和数据特征选择图表类型 确定输出模式 ：根据上下文选择语法模式或代码模式 生成输出 ：按所选模式生成内容 支持的图表类型 type 值 适用场景 line 时间序列趋势 area 时间序列趋势+总量 column 分类数据对比 bar 分类对比（标签长） pie 部分占整体比例 scatter 两变量关系 dual-axes 不同量级数据对比 histogram 连续数值频次分布 boxplot 数据分布与异常值 violin 数据分布密度 radar 多维度对比 funnel 流程转化率 waterfall 累计增减变化 liquid 百分比/进度 word-cloud 词频展示 venn 集合交并关系 treemap 层级数据占比 sankey 流量流向 flow-diagram 流程步骤 mindmap 层级知识梳理 indented-tree 树节点层级/目录 network-graph 实体间关联关系 organization-chart 组织层级 fishbone-diagram 根因分析 table 表格数据展示 summary 内容总结 输出模式 模式一：语法模式（Syntax / JSON） 用于 LLM 应用集成场景，生成图表配置供 GPTVis.render() 消费。支持两种格式： Syntax 格式 ：类 Markdown 缩进语法，适合流式输出（LLM 逐 token 生成时可实时渲染） JSON 格式 ：标准 JSON 对象，适合结构化 API 调用 两种格式等价， GPTVis.render() 均可直接接受。 模式二：代码模式 用于用户需要可直接运行的完整代码场景。生成包含安装说明和完整代码的输出。 GPTVis API GPTVis 是库的统一入口类，负责创建、渲染和销毁图表。 构造函数 new GPTVis ( options : VisualizationOptions ) VisualizationOptions： 参数 类型 必填 默认值 说明 container string | HTMLElement 是 — CSS 选择器或 DOM 元素 width number 否 — 图表宽度（px） height number 否 — 图表高度（px） theme 'default' | 'light' | 'dark' | 'academy' 否 'light' 主题 wrapper boolean 否 false 是否显示外层 UI 容器（含标签页、下载、复制等） locale string 否 'zh-CN' wrapper 内文案语言 方法 render(config: string | object): void 渲染图表。接受两种输入： Syntax 字符串 ：以 vis [type] 开头的文本，自动解析为配置对象 JSON 配置对象 ：包含 type 字段的对象 纯文本 ：不以 vis 开头的字符串会被当作 summary 类型渲染 多次调用 render() 会自动销毁前一个图表再渲染新图表。 destroy(): void 销毁当前图表实例，释放资源。 语法模式：JSON 格式 直接输出符合图表 TypeScript 类型的 JSON 对象， GPTVis.render() 可直接消费。 JSON 示例 { "type" : "column" , "data" : [ { "category" : "A产品" , "value" : 30 , "group" : "线上" } , { "category" : "B产品" , "value" : 50 , "group" : "线上" } ] , "title" : "产品销量对比" , "axisXTitle" : "产品" , "axisYTitle" : "销量（万）" , "stack" : true , "theme" : "academy" , "style" : { "palette" : [ "#5B8FF9" , "#61DDAA" ] } } 语法模式：Syntax 格式 类 Markdown 缩进语法，支持流式渲染。第一行必须是 vis [type] 。 语法规则 基本属性 — key value ，每行一个： title 年度趋势 theme dark 对象数组 — data 下每项用 - 开头，子字段缩进： { data: { time: string; value: number; }[]; } 对应： data - time 2020 value 100 - time 2021 value 120 纯值数组 — 每项用 - 开头： { data: number[] } 对应： data - 10 - 20 含空格的字符串值 — 用引号（单引号或双引号）包裹；不含空格时可省略引号： categories - "North America" - '东南 亚' - 欧洲 嵌套对象 — 对象名占一行，子属性缩进： { style?: { backgroundColor?: string; palette?: string[] } } 对应： style backgroundColor #f0f2f5 palette - #5B8FF9 - #61DDAA 递归树形 — children 数组用 - 缩进： type TreeData = { name: string; children?: TreeData[] }; { data: TreeData; } 对应： data name 根节点 children - name 子节点A children - name 孙节点 - name 子节点B Syntax 完整示例 vis column data - category A产品 value 30 group 线上 - category B产品 value 50 group 线上 title 产品销量对比 axisXTitle 产品 axisYTitle 销量（万） stack true theme academy style palette - #5B8FF9 - #61DDAA Markdown 语法 当输出为 Markdown 格式时，使用 GPT-Vis 作为 fenced code block 的语言标记，内容区写入完整的 Syntax 格式 ： ```GPT-Vis vis line data - time 2020 value 100 ``` 格式： ```GPT-Vis <完整的 Syntax 内容，首行 vis <chart-type>> ``` 语法规则： 语言标记固定为 GPT-Vis 内容区使用 Syntax 格式 规则编写， 首行必须包含 vis <chart-type> （完整列表见上方 支持的图表类型 ） 代码块会被 Markdown 插件转换为 ，由浏览器端渲染 注意 ：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 }