阿里云做网站官网seo优化交流
以下教程分为几个章节，系统地讲解如何使用 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, {