Ant Design Charts入门教程

以下教程将系统地介绍 Ant Design Charts 的用法,涵盖安装、引入、通用配置项、常用图表组件及它们的核心 API,每个 API 均附上详细示例代码,帮助您快速上手并深入掌握。


一、安装

bash 复制代码
# 使用 npm
npm install @ant-design/charts --save

# 或使用 pnpm(文档示例)
pnpm install @ant-design/charts  # 或者 @ant-design/plots 子包安装 :contentReference[oaicite:0]{index=0}
  • 安装完成后,所有图表组件均可从 @ant-design/charts 中按需导入。

二、引入与基础用法

tsx 复制代码
import React from 'react';
import { Line } from '@ant-design/charts';

const Demo: React.FC = () => {
  const data = [
    { time: '2020-01-01', value: 30 },
    { time: '2020-01-02', value: 50 },
    { time: '2020-01-03', value: 45 },
    // ...
  ];

  const config = {
    data,
    xField: 'time',
    yField: 'value',
    smooth: true,
  };

  return <Line {...config} />;
};
  • 上例中,data 为图表的数据源;xField/yField 指定横、纵坐标对应的数据字段。([umijs.org][1])

三、通用配置项(所有组件均支持) ([ant-design-charts-next.antgroup.com][2])

属性 类型 说明
data object[] 数据源
xField string X 轴字段
yField string Y 轴字段
seriesField string 分组字段,用于多系列图
colorField string 着色字段
height number 图表高度(px)
width number 图表宽度(px)
autoFit boolean 是否自适应容器宽度
padding `number[] string`
meta Record<string,object> 用于字段别名、格式化、刻度等设置
xAxis/yAxis object 轴配置,可详见下例
legend `object false`
tooltip `object false`
label `object boolean`
interactions Array<object> 交互行为列表
annotations Array<object> 注解列表
state object 状态样式,如 hover/selected
animation `object boolean`
theme `string object`

四、常用图表及核心 API

4.1 曲线图(Line)

tsx 复制代码
import { Line } from '@ant-design/charts';

const config = {
  data,
  xField: 'time',
  yField: 'value',
  seriesField: 'category',       // 多系列时使用
  smooth: true,                  // 平滑曲线
  point: {                       // 数据点
    size: 4,
    shape: 'circle',
  },
  xAxis: {
    tickCount: 5,
    title: { text: '日期' },
  },
  yAxis: {
    label: { formatter: v => `${v} 万` },
  },
  tooltip: {
    shared: true,
    showCrosshairs: true,
  },
};
return <Line {...config} />;

4.2 柱状图(Column / Bar)

tsx 复制代码
import { Column } from '@ant-design/charts';

const config = {
  data,
  xField: 'type',
  yField: 'value',
  seriesField: 'category',    // 分组柱状
  isStack: false,             // 关闭堆叠
  dodgePadding: 2,            // 分组间距
  color: ({ category }) => category === 'A' ? '#5B8FF9' : '#61DDAA',
  legend: false,              // 隐藏图例
  xAxis: { label: { autoRotate: false } },
};
return <Column {...config} />;

4.3 饼图(Pie)

tsx 复制代码
import { Pie } from '@ant-design/charts';

const config = {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    type: 'inner',
    offset: '-30%',
    content: '{percentage}',
    style: { fontSize: 14, textAlign: 'center' },
  },
  interactions: [{ type: 'element-active' }],
};
return <Pie {...config} />;

4.4 区域图(Area)

tsx 复制代码
import { Area } from '@ant-design/charts';

const config = {
  data,
  xField: 'time',
  yField: 'value',
  seriesField: 'category',
  smooth: true,
  areaStyle: { opacity: 0.6 },
  legend: { position: 'top-right' },
};
return <Area {...config} />;

4.5 散点图(Scatter)

tsx 复制代码
import { Scatter } from '@ant-design/charts';

const config = {
  data,
  xField: 'sepalLength',
  yField: 'sepalWidth',
  colorField: 'species',
  size: 5,
  shape: 'circle',
  tooltip: { showMarkers: false },
  state: {
    active: { style: { lineWidth: 3 } },
  },
};
return <Scatter {...config} />;

五、动态更新数据

React 中直接通过状态改变 data 即可触发图表更新,无需手动调用 API:

tsx 复制代码
const Demo = () => {
  const [data, setData] = useState(initialData);
  useEffect(() => {
    setTimeout(() => {
      setData(newData);  // 图表自动重绘
    }, 3000);
  }, []);
  return <Line {...{ data, xField:'x', yField:'y' }} />;
};

六、高级功能

6.1 交互(Interactions)

tsx 复制代码
interactions: [
  { type: 'brush' },              // 框选
  { type: 'zoom-canvas' },        // 缩放
  { type: 'element-highlight' },  // 悬停高亮
];

6.2 注解(Annotations)

tsx 复制代码
annotations: [
  {
    type: 'text',
    position: ['2020-01-02', 50],
    content: '峰值',
    style: { fill: 'red', fontSize: 12 },
  },
  {
    type: 'line',
    start: ['min', 40],
    end: ['max', 40],
    style: { stroke: '#aaa', lineDash: [4,4] },
  },
];

6.3 自定义主题

tsx 复制代码
import { registerTheme } from '@ant-design/charts';

registerTheme('my-theme', {
  colors10: ['#5B8FF9', '#61DDAA', ...],
  styleSheet: { brandColor: '#5B8FF9' },
});

const config = { theme: 'my-theme', data, xField:'x', yField:'y' };
return <Line {...config} />;

七、小结

  • 安装与引入@ant-design/charts,按需导入 React 组件。
  • 通用配置dataxField/yFieldseriesFieldcolorFieldmetatooltiplegendinteractionsannotationsstateanimationtheme
  • 常用图表LineColumnPieAreaScatter 等,配置方式高度一致。
  • 动态更新 :直接通过 React state 更改 data 即可。
  • 高级扩展:交互、注解、自定义主题满足各种可视化需求。
相关推荐
Rhys..8 小时前
python + Flask模块学习 1 基础用法
python·学习·前端框架·flask
Baklib梅梅11 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
知识分享小能手17 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊1 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
EndingCoder1 天前
数据库集成:使用 SQLite 与 Electron
数据库·electron·sqlite·前端框架·node.js
开发者小天1 天前
在Ant Design Vue 中使用图片预览的插件
前端·javascript·vue.js·前端框架
山雀~2 天前
React实现列表拖拽排序
前端·react.js·前端框架
OEC小胖胖2 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
EndingCoder2 天前
集成 Node.js 模块:文件系统与网络操作
javascript·网络·electron·前端框架·node.js