ant design pro （十）advanced 圖表

一、概述

原文地址：https://pro.ant.design/docs/graph-cn

Ant Design Pro 提供了由設計師精心設計抽象的圖表類型，是在 BizCharts 圖表庫基礎上的二次封裝，同時提供了業務中常用的圖表套件，可以單獨使用，也可以組合起來實現復雜的展示效果。

目前一共包涵 10 個圖表類型，以及 2 個圖表套件：

• 餅狀圖（Pie）

• 柱狀圖（Bar）

• 儀表盤（Gauge）

• 雷達圖（Radar）

• 標簽雲（TagCloud）

• 水波圖（WaterWave）

• 迷你柱狀圖（MiniBar）

• 迷你區域圖（MiniArea）

• 迷你進度條（MiniProgress）

• 帶有時間軸的折線圖（TimelineChart）

• 圖表卡片（ChartCard）

• 圖表字段（Field）

查看圖表組件

二、詳細

2.1、使用 Ant Design Pro 的圖表

Charts 圖表套件是在 components/Charts 包中，引用到項目就像使用其它組件一樣：

你也可以通過單獨使用 pro 的包的方式使用圖表組件：獨立使用 Pro 組件

import { ChartCard, MiniBar } from 'components/Charts';
import { Tooltip, Icon } from 'antd';

const visitData = [
  {
    x: "2017-09-01",
    y: 100
  },
  {
    x: "2017-09-02",
    y: 120
  },
  {
    x: "2017-09-03",
    y: 88
  },
  {
    x: "2017-09-04",
    y: 65
  }
];

ReactDOM.render(
  <ChartCard
    title="支付筆數"
    action={
      <Tooltip title="支付筆數反應交易質量">
        <Icon type="exclamation-circle-o" />
      </Tooltip>
    }
    total="6,500"
    contentHeight={46}
  >
    <MiniBar height={46} data={visitData} />
  </ChartCard>,
  mountNode
);

就可以實現一個最簡單的圖表組合：

2.2、使用 BizCharts 繪制圖表

如果 Ant Design Pro 不能滿足你的業務需求，可以直接使用 BizCharts 封裝自己的圖表組件。

2.2.1、引入 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。