Archivo del skill

Chart Visualization

Name: Chart Visualization
Author: antvis

推荐并生成合适的数据可视化图表，使用 GPT-Vis 语法。支持 26 种图表：统计图表（折线、柱形、条形、饼图、面积、散点、双轴、直方图、箱线、雷达、漏斗、瀑布、水波、词云、小提琴、韦恩、矩阵树图）、流向图（桑基）、关系图（流程图、思维导图、缩进树、网络图、组织架构图、鱼骨图）、数据展示（表格、总结摘要）。

antvis707 estrellas17 abr 2026

Ocupación
Categorías: Análisis de Datos

Contenido de la habilidad

图表可视化技能

工作流程

意图识别与图表选择：根据用户意图和数据特征选择图表
语法生成：基于选定图表类型和数据生成 GPT-Vis 语法
代码生成：生成目标框架（HTML/React/Vue）的可渲染代码

支持的图表类型

名称	别名	英文名	适用场景	分析意图
折线图	线图	Line Chart	时间序列数据，展示趋势变化	趋势分析、对比
柱形图	柱状图	Column Chart	离散分类数据比较（各类别独立）	对比、排名
条形图	横向柱状图	Bar Chart	离散分类数据比较，标签较长	对比、排名
饼图	饼状图	Pie Chart	显示部分占整体的比例	占比、成分
面积图	区域图	Area Chart	时间序列，强调趋势和总量	趋势分析、对比

Skills relacionados

Chart Visualization | Skills Pool

{ title?: string; theme?: string }

title 年度趋势
theme dark

{
  data: {
    time: string;
    value: number;
  }
  [];
}

data
  - time 2020
    value 100
  - time 2021
    value 120

{ data: number[] }

data
  - 10
  - 20
  - 30

{ categories: string[] }

categories
  - 2020
  - 2021

{ style?: { backgroundColor?: string; positiveColor?: string } }

style
  backgroundColor #f0f2f5
  positiveColor #5B8FF9

{ series: { data: number[]; axisYTitle?: string }[] }

series
  - axisYTitle 销售额
    data
      - 91.9
      - 99.1
  - axisYTitle 利润率
    data
      - 0.055
      - 0.06

type TreeData = { name: string; children?: TreeData[] };
{
  data: TreeData;
}

data
  name 根节点
  children
    - name 子节点A
      children
        - name 孙节点
    - name 子节点B

vis line
data
  ...
title 标题

const config: Column = {
  type: 'column',
  data: [
    { category: 'A产品', value: 30, group: '线上' },
    { category: 'A产品', value: 20, group: '线下' },
    { category: 'B产品', value: 50, group: '线上' },
    { category: 'B产品', value: 35, group: '线下' },
  ],
  title: '产品销量对比',
  axisXTitle: '产品',
  axisYTitle: '销量（万）',
  stack: true,
  theme: 'academy',
  style: {
    palette: ['#5B8FF9', '#61DDAA'],
    backgroundColor: '#fafafa',
  },
};

vis column
data
  - category A产品
    value 30
    group 线上
  - category A产品
    value 20
    group 线下
  - category B产品
    value 50
    group 线上
  - category B产品
    value 35
    group 线下
title 产品销量对比
axisXTitle 产品
axisYTitle 销量（万）
stack true
theme academy
style
  palette
    - #5B8FF9
    - #61DDAA
  backgroundColor #fafafa

<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,
      });

      const visSyntax = `
vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
  - time 2022
    value 150
title 年度趋势
`;

      gptVis.render(visSyntax);
    </script>
  </body>
</html>

import { GPTVis } from '@antv/gpt-vis';
import { useEffect, useRef } from 'react';

function ChartComponent({ visSyntax }) {
  const containerRef = useRef(null);
  const gptVisRef = useRef(null);

  useEffect(() => {
    if (containerRef.current && !gptVisRef.current) {
      gptVisRef.current = new GPTVis({
        container: containerRef.current,
        width: 600,
        height: 400,
      });
    }
  }, []);

  useEffect(() => {
    if (gptVisRef.current && visSyntax) {
      gptVisRef.current.render(visSyntax);
    }
  }, [visSyntax]);

  return <div ref={containerRef}></div>;
}

// 使用示例
const visSyntax = `
vis column
data
  - category A产品
    value 30
  - category B产品
    value 50
title 产品销量
`;

<ChartComponent visSyntax={visSyntax} />;

<template>
  <div ref="containerRef"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { GPTVis } from '@antv/gpt-vis';

const props = defineProps({
  visSyntax: String,
});

const containerRef = ref(null);
let gptVis = null;

onMounted(() => {
  gptVis = new GPTVis({
    container: containerRef.value,
    width: 600,
    height: 400,
  });

  if (props.visSyntax) {
    gptVis.render(props.visSyntax);
  }
});

watch(
  () => props.visSyntax,
  (newSyntax) => {
    if (gptVis && newSyntax) {
      gptVis.render(newSyntax);
    }
  },
);
</script>

<!-- 使用示例 -->
<ChartComponent :vis-syntax="visSyntax" />

import { GPTVis, isVisSyntax } from '@antv/gpt-vis';

const gptVis = new GPTVis({
  container: '#container',
  width: 600,
  height: 400,
});

let buffer = '';

// 当 AI 流式输出 token 时
function onToken(token) {
  buffer += token;
  if (isVisSyntax(buffer)) {
    gptVis.render(buffer);
  }
}

type Line = {
  type: 'line' | 'area';
  data: { time: string | number; value: number; group?: string }[];
  title?: string;
  axisXTitle?: string;
  axisYTitle?: string;
  stack?: boolean; // 仅面积图支持
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
    lineWidth?: number;
  };
};

type Column = {
  type: 'column' | 'bar';
  data: { category: string; value: number; group?: string }[];
  title?: string;
  axisXTitle?: string;
  axisYTitle?: string;
  stack?: boolean;
  group?: boolean;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type Pie = {
  type: 'pie';
  data: { category: string; value: number }[];
  innerRadius?: number; // 设为 0.6 变为环图
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type Scatter = {
  type: 'scatter';
  data: { x: number; y: number; group?: string }[];
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type DualAxes = {
  type: 'dual-axes';
  categories: string[];
  series: { type: 'line' | 'column'; data: number[]; axisYTitle?: string }[];
  title?: string;
  axisXTitle?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
    startAtZero?: boolean;
  };
};

type Histogram = {
  type: 'histogram';
  data: number[];
  binNumber?: number;
  title?: string;
  axisXTitle?: string;
  axisYTitle?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type Boxplot = {
  type: 'boxplot' | 'violin';
  data: { category: string; value: number; group?: string }[];
  title?: string;
  axisXTitle?: string;
  axisYTitle?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
    startAtZero?: boolean;
  };
};

type Radar = {
  type: 'radar';
  data: { name: string; value: number; group?: string }[];
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type Funnel = {
  type: 'funnel';
  data: { category: string; value: number }[];
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type Waterfall = {
  type: 'waterfall';
  data: { category: string; value: number }[];
  title?: string;
  axisXTitle?: string;
  axisYTitle?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    palette?: {
      positiveColor?: string;
      negativeColor?: string;
      totalColor?: string;
    };
  };
};

type Liquid = {
  type: 'liquid';
  percent: number; // 0~1
  shape?: 'rect' | 'circle' | 'pin' | 'triangle';
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type WordCloud = {
  type: 'word-cloud';
  data: { text: string; value: number }[];
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type Venn = {
  type: 'venn';
  data: {
    sets: string | string[]; // 交集用逗号分隔，如 "A,B"
    value: number;
    label?: string; // 集合的显示名称，用于显示图表上对应集合的名称
  }[];
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type TreeNode = { name: string; value: number; children?: TreeNode[] };

type Treemap = {
  type: 'treemap';
  data: TreeNode[];
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type Sankey = {
  type: 'sankey';
  data: { source: string; target: string; value: number }[];
  nodeAlign?: 'left' | 'center' | 'right' | 'justify';
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type FlowDiagram = {
  type: 'flow-diagram';
  data: {
    nodes: { name: string }[];
    edges: { source: string; target: string; name?: string }[];
  };
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type NetworkGraph = {
  type: 'network-graph';
  data: {
    nodes: { name: string }[];
    edges: { source: string; target: string; name?: string }[];
  };
  layout?: 'force' | 'circular' | 'grid' | 'radial' | 'concentric' | 'dagre';
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type MindmapData = { name: string; children?: MindmapData[] };

type Mindmap = {
  type: 'mindmap';
  data: MindmapData;
  direction?: 'H' | 'LR' | 'RL'; // 默认 'H'（水平双向）
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type IndentedTreeData = { name: string; children?: IndentedTreeData[] };

type IndentedTree = {
  type: 'indented-tree';
  data: IndentedTreeData;
  direction?: 'LR' | 'RL' | 'H'; // 默认 'LR'
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type OrganizationChartData = {
  name: string;
  description?: string; // 节点描述，如职位、部门简介
  children?: OrganizationChartData[];
};

type OrganizationChart = {
  type: 'organization-chart';
  data: OrganizationChartData;
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

type FishboneNode = { name: string; children?: FishboneNode[] };

type FishboneDiagram = {
  type: 'fishbone-diagram';
  data: FishboneNode;
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
    texture?: 'rough' | 'default'; // 'rough' 为手绘风格
  };
};

type Table = {
  type: 'table';
  data: Record<string, string | number>[];
  title?: string;
  theme?: 'default' | 'dark' | 'academy';
  style?: {
    backgroundColor?: string;
    palette?: string[];
  };
};

# Q4 销售报告

[总收入](metric_name)达到 [¥520万](metric_value, origin=5200000)。

vis summary
# Q4 销售报告

[总收入](metric_name)达到 [¥520万](metric_value, origin=5200000)。

[显示文本](实体类型)
[显示文本](实体类型, key=value)

类型	说明	支持属性	示例
`metric_name`	指标名称	—	`[日活跃用户数](metric_name)`
`metric_value`	指标数值，支持格式化和原始数据	`origin`, `unit`	`[¥1,234,567](metric_value, origin=1234567)`
`other_metric_value`	次要/辅助指标值	—	`[平均订单价值](other_metric_value)`
`delta_value`	绝对变化值，带正负评估	`origin`, `assessment`	`[¥180,000](delta_value, origin=180000, assessment="positive")`
`ratio_value`	百分比变化/增长率	`origin`, `assessment`	`[15%](ratio_value, origin=0.15, assessment="positive")`
`contribute_ratio`	部分对整体的贡献占比	`origin`, `assessment`	`[64.8%](contribute_ratio, origin=0.648, assessment="positive")`
`proportion`	部分与整体的比率	`origin`	`[四分之三](proportion, origin=0.75)`
`trend_desc`	趋势的定性描述	`assessment`	`[强劲增长](trend_desc, assessment="positive")`
`dim_value`	维度值（类别、地区、产品等）	—	`[亚太地区](dim_value)`
`time_desc`	时间引用和时间段描述	—	`[2024年Q4](time_desc)`
`rank`	排名位置	`detail`	`[排名第一](rank, detail=[320, 180, 90, 65, 45])`
`difference`	值之间的差距或差异	`detail`	`[1.4亿台的差距](difference, detail=[200, 180, 160, 140])`
`anomaly`	数据中的异常模式或离群值	`detail`	`[异常集中](anomaly, detail=[15, 18, 20, 65, 22])`
`association`	变量之间的相关性或关系	`detail`	`[强相关性](association, detail=[{"x":100,"y":105},{"x":120,"y":128}])`
`distribution`	数据分布	`detail`	`[分布](distribution, detail=[15, 25, 35, 15, 10])`
`seasonality`	周期性/季节性模式	`detail`	`[明显季节性](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]})`

# Q4 销售报告

## 概述

在 [2024年Q4](time_desc)，[总收入](metric_name)达到
[¥520万](metric_value, origin=5200000)，相比Q3增长了
[¥80万](delta_value, origin=800000, assessment="positive")，
增长率为 [18%](ratio_value, origin=0.18, assessment="positive")。
[客单价](other_metric_value)为 [¥328](metric_value, origin=328)。

## 各地区表现

[北美地区](dim_value)以 [¥210万](metric_value, origin=2100000)领先，
占总收入的 [40%](contribute_ratio, origin=0.40, assessment="positive")。
该地区在所有市场中[排名第一](rank, detail=[2100000, 1800000, 1300000])。

[欧洲](dim_value)呈现[强劲势头](trend_desc, assessment="positive")，
[近一半](proportion, origin=0.48)的销售额来自新客户。
与北美的[90万差距](difference, detail=[210, 195, 180, 170])正在逐季缩小。

# 用户行为分析报告

## 流量趋势

[2024年](time_desc)，[月活跃用户](metric_name)达到
[1,200万](metric_value, origin=12000000)，同比增长
[22%](ratio_value, origin=0.22, assessment="positive")，整体呈现
[持续上升](trend_desc, assessment="positive")趋势。

## 用户分布

用户年龄[分布](distribution, detail=[5, 15, 35, 30, 15])集中在25-35岁区间。
[一线城市](dim_value)用户呈现[明显季节性](seasonality, detail={"data":[80, 95, 110, 150], "range":[0, 200]})，
每年Q4达到峰值。

## 异常与关联

[华南地区](dim_value)出现[异常流量集中](anomaly, detail=[12, 15, 14, 58, 16])，
需进一步排查。分析发现用户活跃度与推送频次之间存在
[强正相关](association, detail=[{"x":1,"y":20},{"x":3,"y":55},{"x":5,"y":90}])。

Chart Visualization

图表可视化技能

工作流程

支持的图表类型

Chart Visualization

图表可视化技能

工作流程

支持的图表类型

GPT-Vis 语法

TypeScript 类型到 Syntax 的转换规则

完整转换示例

框架集成

HTML

React

Vue

流式渲染

图表类型配置

折线图(line) / 面积图(area)

柱形图(column) / 条形图(bar)

饼图(pie)

散点图(scatter)

双轴图(dual-axes)

直方图(histogram)

箱线图(boxplot) / 小提琴图(violin)

雷达图(radar)

漏斗图(funnel)

瀑布图(waterfall)

水波图(liquid)

词云图(word-cloud)

韦恩图(venn)

矩阵树图(treemap)

桑基图(sankey)

流程图(flow-diagram) / 网络图(network-graph)

思维导图(mindmap) / 缩进树(indented-tree) / 组织架构图(organization-chart)

鱼骨图(fishbone-diagram)

表格(table)

总结摘要(summary)

语义标注语法

实体类型

最佳实践

Feishu Wiki

Prose

Clawhub

Coding Agent (bash-first)

Bear Notes

Feishu Perm