AntV

蚂蚁集团开源的数据可视化解决方案，提供从统计图表、图可视化、地理可视化到表格分析的全栈可视化能力，以"图形语法"理论为基础，构建了一套完整的数据可视化体系。

技术简介说明

AntV（Ant Visualization）是蚂蚁集团于 2017 年开源的数据可视化引擎体系，名字寓意 "Ant Visualization"。AntV 的核心理念源自 Leland Wilkinson 的经典著作《The Grammar of Graphics》（图形语法），通过将图表拆解为数据、变换、标记、尺度、坐标系等可组合的文法元素，让开发者能够以声明式的方式构建从简单到复杂的各类可视化。

AntV 不同于单一的图表库，而是一个完整的可视化解决方案家族。它以底层渲染引擎 G 为基础，向上构建了多个专项可视化引擎：G2（统计图表，基于图形语法）、G6（图可视化，关系网络分析）、L7（地理可视化，WebGL 驱动的地理空间数据）、X6（图编辑，流程图/脑图/DAG）、S2（多维交叉表分析）、F2（移动端可视化）。此外还包括 AVA（自动化可视化分析）、ADC（自适应设计色板）等智能化工具。

截至 2025-2026 年，AntV 生态各库均已完成 TypeScript 全面重写和架构升级。G2 升级到 v5.4.x，引入全新的声明式 API 和绑定（bind）机制；G6 升级到 v5.1.x，重构为插件化架构；渲染引擎 G 支持了 SVG/Canvas/WebGL/WebGPU 四种渲染器。AntV 在 GitHub 上各库累计获得 30k+ Stars，其中 G2 和 G6 各约 12.6k 和 12.2k。2026 年，AntV 团队推出了 MCP Server，标志着向 AI 可视化方向的战略转型。

基本信息

各库 GitHub Stars（2026 年）

快速上手

安装

根据需求选择对应的可视化库：

# 统计图表（G2）—— 最常用
pnpm add @antv/g2
 
# 图可视化（G6）—— 关系网络/知识图谱
pnpm add @antv/g6
 
# 地理可视化（L7）—— 地图/空间数据
pnpm add @antv/l7
 
# 图编辑（X6）—— 流程图/脑图/DAG
pnpm add @antv/x6
 
# 多维分析表（S2）—— 交叉表/透视表
pnpm add @antv/s2
 
# 移动端（F2）—— 移动端图表
pnpm add @antv/f2
 
# React 组件封装
pnpm add @ant-design/charts  # 一站式图表组件（集成 G2/G6/L7/X6）

基础配置（以 G2 为例）

G2 是 AntV 最核心的统计图表库，基于图形语法理论：

import { Chart } from '@antv/g2'
 
// 创建图表实例
const chart = new Chart({
  container: 'container', // DOM 容器 ID
  autoFit: true,          // 自适应容器尺寸
  theme: 'classic',       // 主题：'classic' | 'classicDark' | 'light' | 'dark'
})
 
// 声明式绑定数据与图形语法
chart
  .interval()                              // 标记类型：柱状图
  .data([                                  // 数据源
    { genre: 'Action', sold: 120 },
    { genre: 'Strategy', sold: 80 },
    { genre: 'RPG', sold: 95 },
  ])
  .encode('x', 'genre')                    // x 轴映射
  .encode('y', 'sold')                     // y 轴映射
  .encode('color', 'genre')                // 颜色映射
  .axis('x', { title: '游戏类型' })
  .axis('y', { title: '销量' })
 
// 渲染
chart.render()

最小示例（React 使用 @ant-design/charts）

import { Column } from '@ant-design/charts'
 
const data = [
  { genre: 'Action', sold: 120 },
  { genre: 'Strategy', sold: 80 },
  { genre: 'RPG', sold: 95 },
]
 
export default function App() {
  const config = {
    data,
    xField: 'genre',
    yField: 'sold',
    colorField: 'genre',
  }
 
  return <Column {...config} height={400} />
}

Vue 3 集成（G2 原生）

<template>
  <div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>
 
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'
 
const chartRef = ref<HTMLElement>()
let chart: Chart | null = null
 
onMounted(() => {
  chart = new Chart({ container: chartRef.value!, autoFit: true })
  chart
    .interval()
    .data([
      { genre: 'Action', sold: 120 },
      { genre: 'Strategy', sold: 80 },
    ])
    .encode('x', 'genre')
    .encode('y', 'sold')
    .encode('color', 'genre')
  chart.render()
})
 
onUnmounted(() => {
  chart?.destroy()
})
</script>

核心概念与架构

AntV 的架构是分层化的，底层渲染引擎支撑上层各类专项可视化引擎。

分层架构

┌──────────────────────────────────────────────────┐
│             应用层（Application）                  │
│  @ant-design/charts（React 一站式组件库）           │
├──────────────────────────────────────────────────┤
│             专项可视化引擎层                        │
│  G2（统计图表）  G6（图）  L7（地理）  X6（编辑）   │
│  S2（多维表）    F2（移动端）                       │
├──────────────────────────────────────────────────┤
│             图形语法/视觉编码层                     │
│  Mark（标记）、Scale（尺度）、Coordinate（坐标系）   │
│  Transform（数据变换）、Component（交互组件）        │
├──────────────────────────────────────────────────┤
│             渲染引擎层：G                          │
│  场景图（Scene Graph）、事件系统、插件体系           │
│  渲染器：SVG / Canvas / WebGL / WebGPU            │
├──────────────────────────────────────────────────┤
│             基础设施层                              │
│  @antv/util（工具函数）、@antv/scale（尺度算法）    │
│  @antv/coord（坐标系）、@antv/component（UI 组件）  │
└──────────────────────────────────────────────────┘

1. 渲染引擎 G

G 是 AntV 的底层渲染引擎，提供场景图管理、事件系统、渲染插件等基础能力。核心特性：

• 多渲染后端：SVG、Canvas、WebGL、WebGPU 四种渲染器可切换
• 场景图（Scene Graph）：类 DOM 的节点树模型，支持分组、变换、事件冒泡
• 按需渲染：支持脏矩形检测，只重绘变化区域
• 插件化：渲染器通过插件注册，支持运行时动态扩展
• WebGPU 支持：G 是首批支持 WebGPU 的可视化渲染引擎之一

2. 图形语法（G2 的核心）

G2 严格遵循《The Grammar of Graphics》理论，将图表分解为以下可组合的语法元素：

3. 图可视化（G6 的核心）

G6 专注关系数据和图结构的可视化：

• 元素：节点（Node）、边（Edge）、组合（Combo）
• 布局：力导向、层次、环形、网格、FRUCHTERMAN 等 20+ 种布局算法
• 交互：拖拽、缩放、框选、展开/折叠、搜索高亮
• 分析：最短路径、连通分量、社区发现等图分析算法
• 主题：内置多套视觉主题

4. 地理可视化（L7 的核心）

L7（"L" 代表 Location，"7" 代表七大洲）是 WebGL 驱动的地理空间数据可视化引擎：

• 地图底图：支持 Mapbox、高德、腾讯、天地图等多种底图
• 可视化图层：点、线、面、热力图、3D 建筑、地形、粒子效果
• WebGL 渲染：支持百万级地理数据的高性能渲染
• 2D/3D 混合：支持 2D 地图叠加 3D 可视化效果

5. 图编辑（X6 的核心）

X6 提供图编辑能力，用于构建流程图、DAG 图、脑图等：

• MVC 架构：Model（数据模型）、View（视图渲染）、Controller（交互控制）
• HTML/SVG 混合渲染：节点可使用 HTML 自定义，边使用 SVG 绘制
• 插件体系：小地图、对齐线、快捷键、撤销/重做、选择框等
• React/Vue 组件：支持使用 React/Vue 组件作为节点内容

核心特性

1. 📐 图形语法理论：G2 严格遵循 Wilkinson 的图形语法理论，通过 Mark、Encode、Scale、Coordinate、Transform 的组合，可以用少量代码构建出无穷变化的图表。

2. 🎨 渲染引擎 G：底层渲染引擎支持 SVG/Canvas/WebGL/WebGPU 四种渲染器，可根据场景灵活切换。WebGPU 支持使其成为下一代可视化基础设施。

3. 🧩 完整的可视化家族：G2（统计图表）、G6（图可视化）、L7（地理可视化）、X6（图编辑）、S2（多维表）、F2（移动端）覆盖了数据可视化的全场景。

4. 📱 多端适配：F2 专为移动端设计，支持 Canvas 渲染、小程序、Node.js 服务端渲染、Weex，体积小巧。

5. 🔌 插件化架构：G6 5.0 重构为插件化架构，所有功能（布局、交互、元素、分析）都以插件形式提供，按需加载。

6. 🤖 AI 可视化集成：2026 年推出 MCP Server（@antv/mcp-server-antv），支持与 AI 助手集成，通过自然语言生成可视化。AVA 提供自动化可视化分析能力。

7. 🎯 TypeScript 原生：所有库均使用 TypeScript 编写，提供完整的类型推导和开发体验。

8. 🔄 React 深度集成：@ant-design/charts 提供一站式 React 图表组件，封装了 G2/G6/L7/X6 的 React 版本。同时提供 Graphin（G6 的 React 工具包）、LarkMap（L7 的 React 版本）。

9. 📊 多维分析表（S2）：专注大数据量多维交叉表分析，支持透视表、交叉表、明细表，提供排序、筛选、下钻、条件格式等分析能力。

10. 🗺️ 地理空间可视化（L7）：WebGL 驱动，支持 2D/3D 混合渲染，百万级地理数据高性能渲染，支持多种地图底图。

生态图

AntV 的生态系统在 2025-2026 年已经非常完善：

核心可视化引擎

基础设施

框架封装

智能化与 AI

适用场景

1. 企业级数据大屏与仪表盘：G2 提供丰富的统计图表类型，配合 @ant-design/charts 的 React 封装，可快速搭建数据仪表盘和可视化大屏。适合电商、金融、政务等场景的数据展示。

2. 关系网络与知识图谱：G6 是图可视化领域的专业方案，适合构建社交网络分析、知识图谱可视化、组织架构展示、IT 拓扑图等关系型数据可视化。

3. 地理信息可视化：L7 提供 WebGL 驱动的地理空间可视化，适合构建物流轨迹、人口热力图、疫情地图、气象数据可视化、3D 城市等地理场景。

4. 流程图与 DAG 编辑器：X6 是构建流程图、DAG 图、脑图、ER 图等专业图编辑场景的最佳选择。适合低代码平台的工作流编辑器、数据分析的 Pipeline 可视化。

5. 多维数据分析表：S2 专注大数据量多维交叉表分析，适合 BI 系统的透视表、财务报表、数据探索工具。支持排序、筛选、下钻、条件格式等分析能力。

6. 移动端 H5 图表：F2 专为移动端设计，体积小巧（~50KB gzip），支持 Canvas 渲染、小程序、Node.js 服务端渲染，适合移动端数据报表、支付宝/微信小程序内嵌图表。

7. 自动化可视化分析：AVA 提供数据洞察、图表自动推荐、智能可视化等能力，适合构建智能 BI 系统、数据分析助手。

开发与工程化

按需引入（G2）

G2 5.x 支持按需引入 Mark、Transform、Component 等模块：

import { Chart } from '@antv/g2'
import { renderToSVGString } from '@antv/g2/ssr'
 
// G2 默认 Tree-shaking，只打包使用的 Mark 和 Component
const chart = new Chart({ container: 'container' })
chart.interval().data([...]).encode('x', 'genre').encode('y', 'sold')
chart.render()

服务端渲染（SSR）

G2 支持在 Node.js 环境中渲染图表为 SVG 或图片：

import { renderToSVGString } from '@antv/g2/ssr'
 
const svgString = await renderToSVGString({
  type: 'interval',
  data: [{ genre: 'Action', sold: 120 }],
  encode: { x: 'genre', y: 'sold' },
  width: 600,
  height: 400,
})

F2 也支持 Node.js 环境渲染：

import { Canvas } from '@antv/f2'
import { createCanvas } from 'canvas'
 
const canvas = createCanvas(300, 200)
const f2Canvas = new Canvas({ canvas, width: 300, height: 200 })
// ... 创建图表

主题定制

import { register } from '@antv/g2'
 
// 注册自定义主题
register('theme', 'myTheme', {
  palette: {
    type: 'category-10',
    color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E86452'],
  },
  components: {
    axis: {
      grid: { line: { style: { stroke: '#eee' } } },
    },
  },
})
 
// 使用主题
const chart = new Chart({ theme: 'myTheme' })

使用 @ant-design/charts（React 一站式）

pnpm add @ant-design/charts

import { Column, Line, Pie, DualAxes } from '@ant-design/charts'
 
// 柱状图
<Column data={data} xField="category" yField="value" colorField="category" />
 
// 双轴图
<DualAxes
  data={[data1, data2]}
  xField="date"
  yField={['value', 'count']}
  geometryOptions={[
    { geometry: 'column' },
    { geometry: 'line' },
  ]}
/>

与 G6 集成（React + Graphin）

import { Graphin } from '@antv/graphin'
 
const data = {
  nodes: [
    { id: 'node1', label: '节点1' },
    { id: 'node2', label: '节点2' },
  ],
  edges: [
    { source: 'node1', target: 'node2' },
  ],
}
 
export default function Graph() {
  return <Graphin data={data} layout={{ type: 'force' }} />
}

使用 L7 构建地图

import { Scene } from '@antv/l7'
import { Mapbox } from '@antv/l7-maps'
import { PointLayer } from '@antv/l7'
 
const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'light',
    center: [120.19382669582967, 30.258134],
    zoom: 3,
  }),
})
 
const pointLayer = new PointLayer()
  .data(data)
  .shape('circle')
  .size('magnitude', [1, 20])
  .color('type', ['#f00', '#0f0', '#00f'])
 
scene.addLayer(pointLayer)

性能与安全

性能特性

• 渲染引擎 G：支持四种渲染器（SVG/Canvas/WebGL/WebGPU），可根据数据量和场景选择最优渲染方式
• 按需渲染：G 引擎支持脏矩形检测，只重绘变化区域
• 大数据量渲染：L7 基于 WebGL，支持百万级地理数据的高性能渲染；G2 通过 transform 提供数据聚合和下采样
• Tree-shaking：G2 5.x 默认支持 Tree-shaking，只打包使用的模块
• WebGPU 加速：G 引擎已支持 WebGPU，可利用 GPU 加速大规模数据渲染

性能优化建议

1. 选择合适的渲染器：

   • 数据量 < 1000：SVG（矢量、高清）
   • 数据量 1000-100000：Canvas（性能平衡）
   • 数据量 > 100000：WebGL/WebGPU（GPU 加速）

2. 数据聚合：在渲染前对数据进行聚合，减少渲染元素数量

3. 按需引入：使用 G2 的 Tree-shaking，只引入需要的 Mark 和 Component

4. 移动端优化：使用 F2，其 Canvas 渲染针对移动端优化

5. 地理数据优化：L7 提供数据聚合、LOD（层级细节）等优化策略

安全考量

• ⚠️ 供应链安全事件：2026 年 5 月 19 日，AntV 生态遭遇严重的 npm 供应链攻击（"Mini Shai-Hulud"恶意软件），323+ 个包被篡改，影响约 110 万周下载量。攻击者通过被黑的 npm 维护者账号，在 01:39-02:56 UTC 之间发布了 639 个恶意版本。建议使用 lockfile 固定版本、启用 npm 审计、验证包完整性
• XSS 防护：G6/X6 支持在节点中嵌入 HTML 内容，需注意对用户输入的转义处理
• 数据验证：对于外部数据源，建议进行数据格式和范围验证
• 依赖管理：使用 npm audit、pnpm audit 定期检查依赖安全

技术对比

AntV 内部库选型指南

最佳实践

1. 按场景选择合适的库

统计图表 → G2
关系网络 → G6
地图     → L7
流程图   → X6
交叉表   → S2
移动端   → F2
React    → @ant-design/charts

不要用一个库解决所有问题——AntV 的设计哲学就是让每个库专注自己的领域。

2. 使用 G2 的图形语法组合能力

// ✅ 利用图形语法灵活组合
chart
  .interval()
  .data(data)
  .encode('x', 'category')
  .encode('y', 'value')
  .encode('color', 'type')
  .transform({ type: 'stackY' })        // 堆叠
  .transform({ type: 'sortX', by: 'y' }) // 排序
  .style('radiusTopLeft', 4)             // 圆角
  .style('radiusTopRight', 4)
  .axis('y', { labelFormatter: '~s' })   // 格式化
 
// ❌ 避免硬编码静态图表

3. G6 使用插件化架构

import { Graph } from '@antv/g6'
 
const graph = new Graph({
  container: 'container',
  // 按需加载插件
  plugins: [
    { type: 'minimap' },
    { type: 'toolbar' },
    { type: 'contextmenu' },
  ],
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  layout: { type: 'force', preventOverlap: true },
})

4. 使用 @ant-design/charts 加速开发

对于 React 项目，@ant-design/charts 提供了开箱即用的图表组件：

import { Column, Line, Pie } from '@ant-design/charts'
 
// 无需手动处理 G2 实例创建、数据绑定、响应式
<Column data={data} xField="category" yField="value" />

5. 地理可视化性能优化

// ✅ 使用数据聚合
const pointLayer = new PointLayer({
  aggregation: {
    type: 'count',
    field: 'magnitude',
    size: [4, 30],
  },
})
 
// ✅ 使用 LOD（层级细节）
const layer = new PointLayer()
  .source(data)
  .shape('circle')
  .size(4)
  .active(true)
  .animate(true)

6. 避免重复创建图表实例

// ✅ 使用 ref 管理实例
const chartRef = useRef<Chart>()
 
useEffect(() => {
  if (!chartRef.current) {
    chartRef.current = new Chart({ container: containerRef.current! })
  }
  chartRef.current.changeData(newData) // 更新数据而非重建
  return () => { chartRef.current?.destroy() }
}, [data])

7. S2 大数据量优化

// ✅ 使用分页和虚拟滚动
const s2Options = {
  pagination: {
    pageSize: 50,
  },
  // 虚拟滚动
  virtualScroll: {
    enable: true,
  },
}

技术局限与边界

1. 生态复杂度高：AntV 包含 G2/G6/L7/X6/S2/F2 等多个库，各库有独立的 API 和概念体系，学习成本较高。开发者需要先理解生态全貌，才能选择合适的库。

2. G2 5.x API 变化大：G2 从 4.x 升级到 5.x 是一次破坏性重构，引入了全新的 Bind（绑定）语法，迁移成本较高。

3. 文档和示例不足：相比 ECharts 丰富的示例集，AntV 的文档和示例相对薄弱，特别是高级用法和复杂场景的示例不够完善。

4. 国际影响力有限：AntV 在国内（特别是蚂蚁生态）使用广泛，但在国际市场的影响力不如 ECharts、Chart.js、D3.js 等。英文文档和社区资源相对较少。

5. React 强绑定：@ant-design/charts 仅支持 React，Vue/Angular 用户需要使用各库的原生 API。虽然 S2 曾有 Vue 组件（@antv/s2-vue），但已在 v2.0.0 后停止维护。

6. ⚠️ 供应链安全风险：2026 年 5 月的 npm 供应链攻击事件（Mini Shai-Hulud）严重影响了 AntV 生态的可信度。虽然已修复，但提醒开发者需要加强依赖安全管理。

7. 各库版本碎片化：不同库的版本升级节奏不同，G2 已稳定在 5.x，G6 刚升级到 5.x，L7 还在 2.x，X6 升级到 3.x，版本碎片化增加了维护成本。

8. X6 开源与商业的平衡：X6 的图编辑能力很强，但部分高级功能（如高级布局算法）需要商业授权，开源版和商业版存在功能差异。

9. L7 底图依赖：L7 依赖第三方地图服务（Mapbox、高德等）提供底图，需要配置 Token，离线场景需要额外处理。

10. F2 更新节奏较慢：F2 最新更新在 2025 年 11 月，相比其他库更新节奏稍慢，可能反映移动端可视化的市场需求变化。

学习资源

官方资源

• AntV 官网
• G2 官方文档
• G6 官方文档
• L7 官方文档
• X6 官方文档
• S2 官方文档
• F2 官方文档
• G 渲染引擎文档
• @ant-design/charts 文档

教程与文章

• G2 图形语法教程
• G6 图可视化入门
• L7 地理可视化教程
• AntV 可视化学院

社区资源

• GitHub Discussions（G2）
• GitHub Discussions（G6）
• 掘金 AntV 标签
• 知乎 AntV 话题
• AntV GitHub Sponsors

示例

• G2 图表示例
• G6 图可视化示例
• L7 地图示例
• @ant-design/charts 示例

相关生态

• AVA 自动化可视化
• Graphin（G6 React 工具包）
• LarkMap（L7 React 版本）
• mcp-server-antv（AI 集成）

2026 年现状

截至 2026 年 7 月，AntV 生态正在经历重要的转型期：

1. 全面 TypeScript 化完成：所有核心库（G2 5.x、G6 5.x、L7 2.x、X6 3.x、S2 2.x、F2 5.x）均已完成 TypeScript 重写，类型推导和开发体验大幅提升。

2. AI 可视化转型：2026 年推出的 MCP Server（mcp-server-antv）标志着 AntV 向 AI 可视化方向的战略转型。GitHub 组织名称也更新为"AntV AI Visualization Team"，表明其定位从传统可视化库转向 AI 驱动的可视化平台。

3. 供应链安全事件：2026 年 5 月 19 日的 npm 供应链攻击事件（Mini Shai-Hulud 恶意软件）是 AntV 生态历史上最严重的安全事件。323+ 个包被篡改，影响约 110 万周下载量。事件后 AntV 团队加强了安全管理，但也提醒了整个开源生态对供应链安全的重视。

4. G2 5.x 稳定成熟：G2 5.x 引入的全新 Bind 语法和图形语法体系已经稳定，社区逐渐完成了从 4.x 的迁移。2026 年初发表的学术论文（Visual Informatics 期刊）也证明了 G2 的学术影响力。

5. G6 5.x 插件化重构：G6 5.x 的插件化架构使其更加灵活和可定制，但迁移成本也较高。社区正在逐步适应新架构。

6. 与 ECharts 的竞争格局：在国内市场，AntV 与 ECharts 形成双寡头格局。AntV 的优势在于：

   • 完整的可视化家族（G2/G6/L7/X6/S2/F2），覆盖全场景
   • 图形语法理论驱动的灵活性
   • 与 Ant Design 的深度整合
   • AI 可视化（AVA + MCP）的前瞻布局 ECharts 的优势在于：配置简单、开箱即用、社区更大、国际化更好

7. React 生态深化：@ant-design/charts 持续迭代，Graphin、LarkMap 等 React 封装保持活跃，AntV 在 React 生态中的集成度进一步提高。

8. 各库版本碎片化：不同库的版本升级节奏不同，增加了生态的复杂度。G2 5.x、G6 5.x、L7 2.x、X6 3.x、S2 2.x、F2 5.x，版本号的碎片化是当前的挑战之一。

9. 社区活跃度：GitHub 各库累计 30k+ Stars，G2 和 G6 各约 12k+。虽然国内使用广泛，但相比 ECharts（66.8k Stars），在国际市场的影响力仍有差距。

10. 未来方向：AntV 正在向 AI 驱动的可视化平台转型，MCP Server、AVA 自动化分析、AI Agent 技能包等新方向值得关注。同时，渲染引擎 G 对 WebGPU 的支持也使其具备了下一代可视化基础设施的潜力。