图表

上次修改时间：2021-07-02 10:46:75

Ant Design Pro 提供了由设计师精心设计抽象的图表类型，是在 BizCharts 图表库基础上的二次封装，同时提供了业务中常用的图表套件，可以单独使用，也可以组合起来实现复杂的展示效果。

目前一共包涵 10 个图表类型，以及 2 个图表套件：

饼状图（Pie）
柱状图（Bar）
仪表盘（Gauge）
雷达图（Radar）
标签云（TagCloud）
水波图（WaterWave）
迷你柱状图（MiniBar）
迷你区域图（MiniArea）
迷你进度条（MiniProgress）
带有时间轴的折线图（TimelineChart）
图表卡片（ChartCard）
图表字段（Field）

查看图表组件

使用 Ant Design Pro 的图表

v4 中删除了组件库，如果你还要使用可以看图表组件

使用 BizCharts 绘制图表

如果 Ant Design Pro 不能满足你的业务需求，可以直接使用 BizCharts 封装自己的图表组件。

引入 BizCharts

通过 npm 安装

npm install bizcharts --save

在项目中使用

import { Chart, Axis, Tooltip, Geom } from 'bizcharts';

const data = [...];

<Chart height={400} data={data} forceFit>
  <Axis name="month" />
  <Axis name="temperature" label={{ formatter: val => `${val}°C` }} />
  <Tooltip crosshairs={{ type : "y" }} />
  <Geom type="line" position="month*temperature" size={2} color={'city'} />
  <Geom type='point' position="month*temperature" size={4} color={'city'} />
</Chart>

参看更多 Demo。