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

嗨，数据可视化小白！

你是否曾经看着别人做出炫酷的数据图表羡慕不已？是否想让你的数据活起来，让枯燥的数字变成生动的故事？今天，我带你走进 AntV 的世界，让你从零开始，秒变数据可视化达人！

什么是 AntV？

AntV 是蚂蚁集团打造的一套数据可视化解决方案，它就像一个神奇的工具箱，里面装满了各种制作图表的工具。想象一下，你有一堆杂乱的数据，AntV 就能帮你把它们变成漂亮的柱状图、折线图、饼图，甚至是复杂的关系图谱！

AntV 家族成员

AntV 不是一个单一的工具，而是一个大家族：

成员	功能	特点
G2	统计图表	灵活强大，支持各种图表类型
G6	图可视化	专门处理关系数据，比如社交网络、流程图
F2	移动端图表	专为手机端优化
L7	地理空间可视化	地图可视化神器

对于新手来说，我们先从 G2 开始，因为它最常用也最容易上手！

准备工作：搭建开发环境

好啦，废话不多说，让我们开始动手！

第一步：安装 Node.js

如果你还没有安装 Node.js，赶紧去官网下载一个：Node.js官网

安装完成后，打开命令行工具，输入：

bash 复制代码

node -v

如果显示版本号，就说明安装成功啦！

第二步：创建项目文件夹

在电脑上找个地方新建一个文件夹，比如叫 antv-demo，然后进入这个文件夹：

bash 复制代码

mkdir antv-demo
cd antv-demo

第三步：初始化项目

输入下面的命令，一路按回车就好：

bash 复制代码

npm init -y

这样就创建了一个 package.json 文件，它是项目的配置文件。

第四步：安装 AntV G2

现在安装 G2 图表库：

bash 复制代码

npm install @antv/g2

好了！环境搭建完成！是不是很简单？

你的第一个图表：Hello World！

现在让我们来创建第一个图表！

创建 HTML 文件

在项目文件夹中新建一个 index.html 文件：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 AntV 图表</title>
</head>
<body>
  <!-- 这里是图表的容器 -->
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <!-- 引入我们写的 JavaScript 文件 -->
  <script src="./index.js"></script>
</body>
</html>

创建 JavaScript 文件

再创建一个 index.js 文件：

javascript 复制代码

// 导入 G2 库
import { Chart } from '@antv/g2';

// 准备一些假数据
const data = [
  { type: '苹果', value: 100 },
  { type: '香蕉', value: 80 },
  { type: '橙子', value: 120 },
  { type: '葡萄', value: 90 },
  { type: '西瓜', value: 150 }
];

// 创建图表实例
const chart = new Chart({
  container: 'chart', // 指定图表渲染的容器
  autoFit: true, // 自动适应容器大小
});

// 加载数据
chart.data(data);

// 设置坐标轴
chart.coordinate({
  type: 'theta', // 极坐标系，用于饼图
  radius: 0.8, // 饼图半径
});

// 创建饼图
chart
  .interval()
  .position('value')
  .color('type')
  .adjust('stack');

// 渲染图表
chart.render();

运行项目

现在我们需要一个简单的服务器来运行这个项目。安装一个轻量级的服务器：

bash 复制代码

npm install -g serve

然后运行：

bash 复制代码

serve .

打开浏览器，访问 http://localhost:3000，你就能看到一个漂亮的饼图啦！

让图表动起来！

刚刚的饼图虽然好看，但有点单调。让我们给它加点动画效果！

修改 index.js 文件：

javascript 复制代码

// 创建饼图
chart
  .interval()
  .position('value')
  .color('type', ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7']) // 自定义颜色
  .adjust('stack')
  .label('type', {
    offset: 20, // 标签距离饼图的距离
    style: {
      fontSize: 14,
      fontWeight: 'bold',
    },
  });

// 添加交互效果：鼠标悬停高亮
chart.interaction('element-active');

// 添加动画
chart.animate({
  appear: {
    animation: 'fadeIn', // 出现动画
    duration: 1000, // 持续时间
  },
});

刷新浏览器，看看效果是不是更棒了！

实战案例：销售数据仪表盘

让我们来一个更实用的例子------创建一个销售数据仪表盘。

数据准备

javascript 复制代码

const salesData = [
  { month: '1月', sales: 1200, profit: 300 },
  { month: '2月', sales: 1500, profit: 380 },
  { month: '3月', sales: 900, profit: 220 },
  { month: '4月', sales: 2000, profit: 500 },
  { month: '5月', sales: 1800, profit: 450 },
  { month: '6月', sales: 2200, profit: 550 },
];

创建柱状图

javascript 复制代码

// 创建图表实例
const chart = new Chart({
  container: 'chart',
  autoFit: true,
});

// 加载数据
chart.data(salesData);

// 设置 X 轴
chart
  .axis('month', {
    label: {
      autoHide: false,
      autoRotate: false,
    },
  });

// 设置 Y 轴
chart
  .axis('sales', {
    label: {
      formatter: (v) => `${v}元`, // 格式化显示
    },
  });

// 创建柱状图
chart
  .interval()
  .position('month*sales')
  .color('month', ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD'])
  .label('sales', (datum) => `${datum.sales}元`, {
    position: 'middle',
    style: {
      fill: '#fff',
      fontSize: 12,
    },
  });

// 添加交互
chart.interaction('element-active');

// 渲染
chart.render();

小技巧：让图表更漂亮

1. 使用渐变色

javascript 复制代码

chart
  .interval()
  .position('month*sales')
  .color('month', ['l(90) 0:#FF6B6B 1:#FF8E8E', 'l(90) 0:#4ECDC4 1:#7EDDD4', ...]);

2. 添加背景网格

javascript 复制代码

chart
  .axis('sales', {
    grid: {
      line: {
        style: {
          stroke: '#eee',
          lineWidth: 1,
          lineDash: [4, 4], // 虚线
        },
      },
    },
  });

3. 添加标题

javascript 复制代码

chart.title('2024年上半年销售数据', {
  style: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});