AntV 入门系列第一篇：从基础开始的数据可视化之旅

嗨，数据可视化小白！

痛点：看着别人的炫酷图表却不知从何下手？按理说，数据枯燥、难以表达？不过，别担心，

什么是 AntV？怎么说呢，

AntV 是蚂蚁集团建立的数据可视化方法套件就像一个神奇的工具箱。装满了柱状图、折线图、饼图乃至复杂关系图谱等各种绘图工具。

AntV 家族成员

对于新手我们推荐先从G2入手，它最常用且上手门槛最低。

至于准备工作，搭建开发环境

痛点：环境配置繁琐、命令行报错让人抓狂？下面一步一步帮你解决，

再看第一步先，安装 Node.js

If you haven't installed Node.js yet,download it from official website:

安装完成后在终端执行：

node -v
# 若显示版本号则说明安装成功

说到接下来。创建项目文件夹

mkdir antv-demo
cd antv-demo

：初始化项目

npm init -y
# 一路回车就可以完成初始化

至于第四步，安装 AntV G2 图表库

npm install @antv/g2
# 完成后即可在代码中引用 G2

Pain point solved: 环境搭建只需四步，简单快速。

你的第一个图表：Hello World！🎉

创建 HTML 文件

创建 JavaScript 文件——绘制一张饼图 🎂

// 导入 G2 主要类
import { Chart } from '@antv/g2';// 假数据
const data =;// 创建 Chart 实例
const chart = new Chart({
container: 'chart'。autoFit: true,});// 加载数据
chart.data;// 使用极坐标系绘制饼图
chart.coordinate;// 绘制饼块并堆叠
chart.interval
.position
.color
.adjust;话说回来，// 渲染图表
chart.render;

运行项目🖥️

# 安装轻量级服务器
npm install -g serve
# 开启服务器并访问项目根目录
serve .
# 默认地址 http://localhost:3000

打开浏览器。你将看到一张颜色鲜艳的饼图——恭喜，你已经完成了第一个 AntV 可视化！🎉🎉🎉

让图表动起来 —— 添加动画和交互效果 🚀

Pain point: 静态图表太单调，缺乏交互让使用者失去兴趣。不过，下面给你的饼图加点“活力”。 怎么说呢，

// 为饼块自定义颜色、标签及交互动画
chart.interval
.position
.color
.adjust
.label('type'。{
从offset来看，-10,style: {
fontSize: 14,fontWeight: 'bold',},});老实说，// 鼠标悬停高亮效果
chart.interaction;// 出场动画
chart.animate({
从appear来看。{
animation: 'fadeIn',duration: 800,},});chart.render;

刷新页面你会看到每块饼子在加载时渐现，而且鼠标悬停时会自动放大突出。

至于实战案例，销售数据仪表盘 📊

This example demonstrates how to build a multi‑month sales bar chart using G2.

准备数据

const salesData =;/* 注意：这里使用中文月份，仅作演示。实际项目建议统一使用 ISO 日期 */

// 创建柱状图实例 const chart = new Chart;

// 加载数据 chart.data;

// X轴 – 月份 chart.axis;

// Y轴 – 销售额 chart.axis=>${v}元}});

// 绘制柱状图并自定义配色 chart.interval .position .color .label=>${d.sales}元。{ position:'middle',style:{fill:'#fff',fontSize :12} });

// 高亮交互 chart.interaction;

// 渲染 chart.render;

// 在柱状图中使用渐变色示例：
chart.interval
.position
.color(
'month',);

​
​
​
​
​
​
​
​
​
​
​
​​
​​
​​
​​
​​
​
​​
​​
​​​
​​​
​​​
​


©2026 AntV 社区·保留所有权利 | 这篇文章基于原始内容重新排版，主要是帮助初学者快速上手。其实，