---
order: 11
title: 圖表
type: 進階
---
Ant Design Pro 提供了由設計師精心設計抽象的圖表類型，是在 [BizCharts](https://github.com/alibaba/BizCharts) 圖表庫基礎上的二次封裝，同時提供了業務中常用的圖表套件，可以單獨使用，也可以組合起來實現復雜的展示效果。
目前一共包涵 10 個圖表類型，以及 2 個圖表套件：
- 餅狀圖（Pie）
- 柱狀圖（Bar）
- 儀表盤（Gauge）
- 雷達圖（Radar）
- 標簽云（TagCloud）
- 水波圖（WaterWave）
- 迷你柱狀圖（MiniBar）
- 迷你區域圖（MiniArea）
- 迷你進度條（MiniProgress）
- 帶有時間軸的折線圖（TimelineChart）
- 圖表卡片（ChartCard）
- 圖表字段（Field）
[查看圖表組件](https://v2-pro.ant.design/components/charts-cn/)
## 使用 Ant Design Pro 的圖表
v4 中刪除了組件庫，如果你還要使用可以看 [圖表組件](https://v2-pro.ant.design/components/charts-cn/)
## 使用 BizCharts 繪制圖表
如果 Ant Design Pro 不能滿足你的業務需求，可以直接使用 [BizCharts](https://github.com/alibaba/BizCharts) 封裝自己的圖表組件。
### 引入 BizCharts
通過 npm 安裝
```
npm install bizcharts --save
```
在項目中使用
```jsx
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](https://alibaba.github.io/BizCharts/demo.html)。
