当前位置：首页 > news >正文

Antv G2入门教程

news 来源：原创 2025/6/19 9:52:07

以下教程分为几个章节，系统地讲解如何使用 AntV G2，并为每个核心 API 都给出完整的示例代码。文中引用的官方文档示例均来自 G2 快速上手页面 ([g2.antv.antgroup.com][1])。

一、安装与引入

1.1 NPM／Yarn 安装

# 使用 NPM
npm install @antv/g2# 使用 Yarn
yarn add @antv/g2

1.2 在 HTML 中通过 CDN 引入

<!-- 在你的 HTML 中引入 UMD 包 -->
<script src="https://unpkg.com/@antv/g2/dist/g2.min.js"></script>

引入后，所有 G2 API 均挂载在全局对象 G2 上。

二、创建 Chart 实例

2.1 构造函数 `new Chart(options)`

作用：创建一个图表实例，所有后续可视化配置都在该实例上进行。
参数：
- container：必选，容器的 DOM id 或者 HTMLElement。
- width, height：可选，图表画布宽高，默认自适应容器。
- padding：可选，图表内边距。

import { Chart } from '@antv/g2';// 在页面中准备一个 <div id="container"></div>
const chart = new Chart({container: 'container', // 或者直接传入 HTMLElementwidth: 600,height: 400,padding: [40, 20, 60, 80],
});

三、绑定数据与定义坐标

3.1 `chart.data(data)` / `chart.source(data, scaleConfig?)`

作用：绑定原始数据，并可对每个字段进行刻度（Scale）配置。
示例：

const data = [{ genre: 'Sports', sold: 275 },{ genre: 'Strategy', sold: 115 },{ genre: 'Action', sold: 120 },{ genre: 'Shooter', sold: 350 },{ genre: 'Other', sold: 150 },
];// 方式一：简单绑定
chart.data(data);// 方式二：同时配置坐标轴刻度
chart.source(data, {