AntV 调研：12K+12K+4K+2K stars 蚂蚁全家桶可视化 G2/G6/L7/G2Plot，国内生态必讲 vs Apache ECharts / Plotly / D3

一句话定位 ：蚂蚁集团（Ant Group）出品的数据可视化全家桶，G2（图表）/ G6（图）/ L7（地理）/ G2Plot（响应式） 4 件套合计 31K+ ⭐ · MIT 全干净 · TypeScript 原生， 国内做可视化技术绕不开的官方生态。

国内做 BI / 数据应用 / 业务可视化，技术选型翻来覆去就是几个名字：Apache ECharts（67K ⭐，Apache 基金会）、AntV（蚂蚁集团直营）、D3.js（110K ⭐，底层）、Plotly（17K ⭐，海外 Python 友好）。

但 最被低估的是 AntV——很多人以为它跟 ECharts 是同一个东西（都是国内大厂的），但其实是 两个完全不同的项目：

✅ Apache ECharts → 2013 年百度出品 → 2018 年捐给 Apache 基金会 → 走 Apache 治理路线
✅ AntV → 2016 年蚂蚁集团（Ant Group）自主研发 + 持续运营至今 → 走 Ant Group 商业体路线

AntV 的独特之处：

蚂蚁集团本身就是 AntV 的重度用户——支付宝 / 蚂蚁链 / 蚂蚁森林 / 余额宝 / 芝麻信用所有数据 dashboard 都跑在 AntV 上
4 件套全覆盖 ——G2（统计图表）+ G6（关系图）+ L7（地理空间）+ G2Plot（响应式）， 所有可视化场景一站式
Grammar of Graphics 范式——跟 D3 一脉相承的 ” 图形语法 ”，比 ECharts 的 ” 配置项 ” 更现代
TypeScript 原生 + MIT 全干净——4 件套全部 TS 重写、全部 MIT 协议

10 年下来，AntV 在 GitHub 上有 124 个 public repos，31K+ stars 主力 4 件套，国内做技术的 绕不开的官方生态——阿里 / 字节 / 腾讯 / 美团 / 京东 / 拼多多都在用。

本文 9 段深度拆解，从架构设计到 G2/G6/L7/G2Plot 4 件套分工，从 Grammar of Graphics 范式到 6 维横评，从实战 5 分钟到 6 大决策矩阵，一次讲透 ” 为什么 AntV 跟 ECharts 不一样、跟 D3 不一样、跟 Plotly 不一样 ”。

AntV 是 蚂蚁集团的数据可视化解决方案集合，核心抽象是“ 图形语法 + 场景化框架 ”。

Visualize Data with Vitality by AI · 让数据栩栩如生

底层引擎把数据查询抽象为 view + mark + encode + transform（跟 D3 / Vega-Lite 一脉相承的 Grammar of Graphics 范式），上层封装成 4 件套应对不同场景。

字段	值
组织	antvis
隶属	蚂蚁集团（Ant Group） · 蚂蚁金服出品
成立	2016-05-05
总部	Hangzhou, China（杭州）
Public repos	124 个
官网	antv.antgroup.com
博客	antv.antgroup.com
协议	MIT ✅（4 件套全 MIT）
主语言	TypeScript（4 件套全 TS）

件套	Stars	主语言	场景	License
G2	12,596	TypeScript	统计图表（Grammar of Graphics 引擎）	MIT ✅
G6	12,272	TypeScript	关系图 / 图分析（节点边网络）	MIT ✅
L7	4,056	TypeScript	地理空间可视化（WebGL GIS）	MIT ✅
G2Plot	2,653	TypeScript	响应式图表库（基于 G2 封装）	MIT ✅
合计	31,577 ⭐	TS × 4	全场景可视化	MIT × 4

Repo	用途
AntV S2	多维交叉分析表格（Excel pivot 风格）
AntV X6	流程图 / DAG 编辑器（dagre / BPMN 风格）
AntV AVA	自动化可视化推荐（” 给我这张表自动选 best chart”）
AntV Insight	自动化数据分析 + 洞察发现（” 为什么这个指标下降 ”）
AntV ChartCube	图表在线制作工具（拖拽式）

G2 是 AntV 的 核心抽象，实现了 Leland Wilkinson 的 Grammar of Graphics 理论：

import {Chart} from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .data(data)
  .encode('x', 'genre')      // x 轴映射到 genre 字段
  .encode('y', 'sold')       // y 轴映射到 sold 字段
  .encode('color', 'genre')  // 颜色按 genre 分组
  .mark('bar')               // 图形：柱状
  .transform({type: 'sortXByY'}); // 排序

chart.render();

4 大核心概念：
– ✅
Data——输入数据
– ✅
Encode——字段到视觉通道的映射（位置 / 颜色 / 大小 / 形状）
– ✅
Mark——图形元素类型（point / line / bar / area / rect）
– ✅
Transform——数据预处理（filter / sort / group / bin）

跟 ECharts 的 option 配置范式对比：

维度	ECharts	G2
思维范式	“ 配置项 ”（ChartOptions）	“ 图形语法 ”（Data + Encode + Mark + Transform）
声明方式	配置驱动的 JSON	链式 API + JS
扩展性	通过 option 字段扩展	通过 View / Transform 自定义语法
数据处理	需手动预处理	内置 Transform（sortXByY / binX / stack 等）
代码可读性	中（option 长）	高（链式接近自然语言）

✅ 基础：bar / line / pie / area / scatter / column / heatmap / radar
✅ 统计：histogram / density / boxplot / violin / contour
✅ 时间：time series / time bar / Gantt
✅ 关系：sankey / chord / tree / treemap / sunburst
✅ 地图：choropleth / bubble map（配 L7）

✅ Cross-filter（图表联动筛选）
✅ Tooltip / Highlight / Active
✅ Brush（框选缩放）
✅ Slider（时间轴筛选）
✅ Drill-down（下钻）

✅ 进出场动画 / 状态过渡 / 路径动画
✅ 基于 Web Animations API
✅ 支持 mark.animate() 自定义

✅ 内置 light / dark / classic 3 套
✅ 自定义 theme tokens
✅ 按业务场景定制色板

✅ 自定义 Mark
✅ 自定义 Transform
✅ 自定义 Interaction
✅ 自定义 Coordinate（极坐标 / 螺旋坐标）

关键区分：

件套	定位	适用
G2（12,596 ⭐）	图形语法引擎	想自定义可视化语法 / 做 BI 产品底层
G2Plot（2,653 ⭐）	响应式业务图表库	业务页面快速集成图表

选 G2：你要做 ”BI 产品 ”（如 Metabase/Superset 替代品），需要完整控制语法
选 G2Plot：你要在业务页面快速集成柱状图 / 折线图，G2Plot 是开箱即用的 wrapper

A Graph Visualization Framework in JavaScript

关系图场景：
– ✅ 社交网络（关注关系图）
– ✅ 知识图谱（实体关系）
– ✅ 网络拓扑（设备连接）
– ✅ 风控图谱（人物关系链）
– ✅ 血缘分析（数据 lineage）
– ✅ 组织架构图

能力	说明
12+ 布局算法	force / dagre / circular / fruchterman / mds / radial / d3-force / concentric
10+ 元素类型	node / edge / combo / label / arrow / marker
交互能力	drag / zoom / pan / hover / select / focus
性能	WebGL 渲染（g6-pixer）支持 10 万节点
动画	内置 + 自定义 transition

数据血缘可视化（dbt lineage / Airflow DAG）：

import {Graph} from '@antv/g6';

const graph = new Graph({
  container: 'container',
  layout: {type: 'dagre', rankdir: 'LR'},
  data: {
    nodes: [{ id: 'raw.orders', label: 'raw.orders'},
      {id: 'stg.orders', label: 'stg.orders'},
      {id: 'mart.revenue', label: 'mart.revenue'},
    ],
    edges: [{ source: 'raw.orders', target: 'stg.orders'},
      {source: 'stg.orders', target: 'mart.revenue'},
    ],
  },
});
graph.render();

30 行代码搞定数据血缘图，对比 React Flow / Cytoscape.js 优势在 内置多种布局算法 + 中文文档 + Ant Group 出品稳定。

Large-scale WebGL-powered Geospatial Data Visualization analysis engine

地理场景：
– ✅ 业务地图（门店分布 / 用户密度）
– ✅ 物流路径（轨迹 / 路径规划）
– ✅ GIS 应用（地形 / 行政区划）
– ✅ 实时数据（IoT 设备位置 / 车流）
– ✅ 区域统计（choropleth 热力图）

L7 内置三大地图底图，国内 / 海外全覆盖：

底图	厂商	适用
高德地图（Amap）	高德	国内业务（首选）
Mapbox	Mapbox	海外 / 全球业务
Google Maps	Google	海外（部分国家）

import {Scene} from '@antv/l7';
import {GaodeMap} from '@antv/l7-maps';

const scene = new Scene({
  map: new GaodeMap({
    style: 'light',
    center: [120.15, 30.28], // 杭州
    zoom: 10,
  }),
});

scene.addPointLayer()
  .source(pointData) // {lng, lat, value}
  .shape('circle')
  .size('value', [4, 20])
  .color('value', ['#f7fbff', '#08306b'])
  .render();

20 行代码做出 杭州门店密度热力图 。对比 deck.gl / Mapbox GL JS 优势在 国内地图原生 + Ant Group 出品稳定。

维度	AntV	Apache ECharts	Plotly	D3.js
出身	Ant Group（蚂蚁）	Apache Foundation	Plotly Inc.	Mike Bostock（个人 → Observable）
Stars（G2 主仓）	12,596	67,081（ECharts 主仓）	17,500（Plotly.py）	110,000+
License	MIT ✅	Apache-2.0 ✅	MIT ✅	ISC ✅
主语言	TypeScript	TypeScript（v5+）	Python + JS	JavaScript（vanilla）
范式	Grammar of Graphics	配置项 option	declarative JSON	SVG 操作
学习曲线	中（语法学习）	低（配置即可）	低	陡（底层）
业务封装	G2Plot（响应式）	内置 chart type	内置	需自己包
关系图	G6（独立 12K ⭐）	内置 graph	内置	需自己写
地理	L7（独立 4K ⭐）	内置 geo + BaiduMap/AMap	内置 mapbox	需自己写
大数据性能	G2 v5 优化 + G6 WebGL	Canvas + SVG 双引擎	WebGL	SVG 性能差
国内生态	🟢 蚂蚁系	🟢 Apache 中国社区	🟡 海外为主	🟡 海外为主
中文文档	🟢 完善	🟢 完善	🟡 翻译版	🟡 部分翻译

维度	AntV	Apache ECharts
出品方	蚂蚁集团（仍在持续投入）	Apache 基金会（捐赠后由社区运营）
决策速度	🟢 快（内部决策）	🟡 慢（社区投票）
商业可用	✅ 蚂蚁云可直接托管	✅ 完全中立
长期维护	✅ Ant Group 持续投入	✅ Apache 治理（中立）
生态联动	🟢 支付宝 / 蚂蚁链 / 余额宝全套	🟡 主要靠社区贡献

判断：商业项目想用 国内大厂生态 → AntV；想要 完全中立 → ECharts。

维度	AntV 4 件套	ECharts 单体
包体积（按需引入）	🟢 小（G2Plot 200KB）	🟡 大（ECharts 全量 ~1MB）
学习曲线	🟡 多套 API	🟢 统一 option
深度定制	🟢 每件套都深入	🟡 option 字段有限
一致性	🟡 各件套 API 风格不同	🟢 统一

G2 写法（图形语法）：

chart.data(data).encode('x', 'genre').encode('y', 'sold').mark('bar');

ECharts 写法（配置项）：

chart.setOption({xAxis: { type: 'category', data: genres},
  yAxis: {type: 'value'},
  series: [{type: 'bar', data: solds}],
});

判断：
– ✅ 复杂数据 + 需要自定义 transform →
G2 更现代

– ✅ 标准图表 + 快速集成 →
ECharts 易上手

维度	AntV G6	ECharts Graph
Stars	12,272 ⭐	内置
布局算法	12+（force / dagre / circular / mds / radial）	5+（force / circular）
节点数	🟢 10 万（WebGL）	🟡 万级
API 范式	完整图分析框架	配置项

判断：要 正经做关系图 / 血缘分析 → G6；要 简单展示关系 → ECharts graph。

维度	AntV L7	ECharts Geo
Stars	4,056 ⭐	内置
渲染引擎	WebGL	Canvas + SVG
底图集成	高德 / Mapbox / Google	高德 / Baidu / 百度
性能	🟢 大数据流畅	🟡 中等数据
3D	🟢 L7 原生支持	🟡 ECharts GL 插件

维度	AntV	ECharts
大厂使用	阿里 / 蚂蚁 / 字节 / 京东 / 拼多多 / 美团 / 平安	阿里 / 腾讯 / 字节 / 美团 / 京东
商业案例	🟢 蚂蚁全套业务	🟡 主要社区案例
招聘市场	🟡 蚂蚁系更认	🟢 更广（Apache 通用）
阿里系背书	✅ 蚂蚁直营	✅ 阿里捐赠

# 新项目
npm init -y
npm install @antv/g2

<!DOCTYPE html>
<html>
<head>
  <title>AntV G2 Demo</title>
</head>
<body>
  <div id="container"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

// main.js
import {Chart} from '@antv/g2';

const data = [{ genre: 'Sports', sold: 275},
  {genre: 'Strategy', sold: 115},
  {genre: 'Action', sold: 120},
  {genre: 'Shooter', sold: 350},
  {genre: 'Other', sold: 150},
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .data(data)
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', 'genre')
  .mark('bar')
  .transform({type: 'sortXByY', reverse: true});

chart.render();

npx vite # 或任何静态服务器
# 浏览器 http://localhost:5173

✅ 5 分钟看到柱状图。

数据血缘 + 统计图联动：

// 同一个 Chart 实例里画 2 个 view
chart
  .data(data)
  .encode('x', 'date')
  .encode('y', 'revenue')
  .mark('line')
  .view()
  .data(lineageData)
  .mark('point')
  .transform({type: 'dagre'});

完整链路在 AntV 官方教程里都有，跟 Superset / Metabase 集成的 demo 也都开源。

AntV 的 文档 / 教程 / API reference 主要中文 ——英文翻译 部分覆盖：

✅ 核心 API + 基础教程 → 中英双语
⚠️ 进阶教程 / 案例 → 中文为主
⚠️ 社区 issue → 中文为主

影响：海外团队 / 英文项目用 AntV 需要做内部翻译。

AntV 跟蚂蚁集团其他项目 深度绑定：

✅ 跟 Ant Design（antd）样式联动
✅ 跟支付宝小程序有原生适配
⚠️ 跟 React / Vue 的 wrapper 偏 antd 风格
⚠️ 想脱离 antd 用独立样式 → 需自己写 theme tokens

G2 从 v4 到 v5 是 完全重写（从基于 G2 引擎改成基于 G 渲染引擎）：

✅ 性能大幅提升（WebGL + Canvas 双引擎）
⚠️ API 风格完全不同（v4 是 G2Plot 风格，v5 是新语法）
⚠️ 旧代码迁移成本高
⚠️ 教程 80% 是 v5，少量 v4 历史文档

新项目 ：直接 v5
老项目：评估迁移成本

很多团队搞不清 G2（语法引擎）和 G2Plot（响应式封装）的区别：

❌ 用了 G2 来做简单柱状图 → 杀鸡用牛刀
❌ 用了 G2Plot 来做高度定制 → 不够灵活
✅ 简单场景用 G2Plot（开箱即用）
✅ 复杂场景用 G2（深度定制）

G6 v5 引入 WebGL 渲染（10 万节点），但：

⚠️ WebGL 调试比 Canvas 难
⚠️ 简单 demo 看不出 WebGL 优势
✅ 真正大数据血缘图 → G6 v5 是国内首选

L7 默认接高德地图，生产环境需要高德开发者 key + 商业授权：

⚠️ 个人开发者 → 免费额度够 demo
⚠️ 商业项目 → 需购买高德企业 key
⚠️ 海外项目 → 切 Mapbox 也需付费 key

影响：成本不可忽略，特别是 ToC 高并发项目。

蚂蚁集团直营，国内生态最强 ——支付宝 / 余额宝 / 蚂蚁链全套业务在用， 招人 + 维护 + 商业背书都比 ECharts 更 ” 国内大厂 ”
4 件套分工覆盖全场景 ——G2（图表）+ G6（图）+ L7（地图）+ G2Plot（响应式） 一个团队解决所有可视化，不用堆 4 个不同库的依赖
MIT + TypeScript 全干净——4 件套全 MIT 商用零风险，TS 原生跟现代前端栈无缝集成

❌ 海外项目（高德地图授权 + 中文文档）→ Plotly / Observable Plot
❌ 只用一张柱状图 → G2Plot 都嫌重，直接 Apache ECharts
❌ 从 D3 迁移老项目 → 继续用 D3，重写成本不值

国内业务 + 中大型项目 + 多场景可视化 → AntV 4 件套是首选 ；
简单业务图表 + 团队熟悉 ECharts → ECharts；
海外项目 + Python 友好 → Plotly；
底层自定义 → D3.js。

官方链接：《AntV 调研：12K+12K+4K+2K stars 蚂蚁全家桶可视化 G2/G6/L7/G2Plot》
短链：https://east196.cn/?p=421
WordPress API ID：421
状态：published · 2026-08-28

AntV 官网 — Visualize Data with Vitality by AI
antvis/G2 GitHub — 12,596 ⭐ / MIT / TypeScript
antvis/G6 GitHub — 12,272 ⭐ / 关系图
antvis/L7 GitHub — 4,056 ⭐ / 地理空间
antvis/G2Plot GitHub — 2,653 ⭐ / 响应式图表
Apache ECharts 调研（67K ⭐） — 同类国内竞品
Plotly 官方 — 海外 Python 友好竞品
D3.js 官方 — 底层可视化（110K+ ⭐）
Vega-Lite 官方 — Grammar of Graphics 范式参考
Apache ECharts vs AntV 对比 — 知乎讨论
AntV AVA — 自动化可视化推荐
AntV Insight — 自动化数据分析

AntV 调研：12K+12K+4K+2K stars 蚂蚁全家桶可视化 G2/G6/L7/G2Plot，国内生态必讲 vs Apache ECharts / Plotly / D3

写在前面

一、它解决什么问题

1.1 一句话定位

1.2 基本信息（GitHub API 实时 · 2026-08-28 拉取）

1.3 4 件套分工（核心抽象）

1.4 周边生态（124 repos 选 5 个）

二、核心能力 1：G2 · 统计图表的 ” 图形语法 ” 引擎

2.1 Grammar of Graphics 范式

2.2 G2 5 大核心能力

2.2.1 50+ 图表类型

2.2.2 交互能力

2.2.3 动画

2.2.4 主题

2.2.5 扩展性

2.3 G2 vs G2Plot：抽象层 vs 业务层

三、核心能力 2：G6 · 关系图 / 图分析

3.1 一句话定位

3.2 核心能力

3.3 实战场景

四、核心能力 3：L7 · 地理空间可视化

4.1 一句话定位

4.2 三大底图集成

4.3 实战场景

五、对比主流可视化库（6 维横评）

5.1 跟 4 个最常被拿来做对比的项目

5.2 6 大核心差异

差异 1：AntV 走 Ant Group 直营，ECharts 走 Apache 基金会

差异 2：AntV 4 件套分工 vs ECharts 单体全家桶

差异 3：AntV Grammar of Graphics vs ECharts 配置范式

差异 4：关系图 G6 vs ECharts Graph

差异 5：地理 L7 vs ECharts Geo

差异 6：生态与公司背书

六、实战：5 分钟跑通 G2 柱状图

6.1 Step 1 · 安装（1 分钟）

6.2 Step 2 · HTML 容器 + 数据（2 分钟）

6.3 Step 3 · 启动（30 秒）

6.4 进阶：30 分钟做出 G2 + G6 联动

七、风险与坑（6 条）

7.1 中文文档优先 vs 英文文档 ⚠️

7.2 蚂蚁系生态绑定 ⚠️

7.3 v4 → v5 升级 breaking change ⚠️

7.4 G2 vs G2Plot 选择纠结

7.5 G6 性能 vs 易用性 trade-off

7.6 L7 商业地图授权 ⚠️

八、总结

8.1 3 个最值得用 AntV 的理由

8.2 3 个不要用 AntV 的场景

8.3 一句话决策

📎 WordPress 链接

参考

近期文章

近期评论