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

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

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

查看图表组件

使用 Ant Design Pro 的图表

Charts 图表套件是在 components/Charts 包中，引用到项目就像使用其它组件一样：

你也可以通过单独使用 pro 的包的方式使用图表组件：独立使用 Pro 组件

  1. import { ChartCard, MiniBar } from 'components/Charts';
  2. import { Tooltip, Icon } from 'antd';
  4. const visitData = [
  5.   {
  6.     x: "2017-09-01",
  7.     y: 100
  8.   },
  9.   {
  10.     x: "2017-09-02",
  11.     y: 120
  12.   },
  13.   {
  14.     x: "2017-09-03",
  15.     y: 88
  16.   },
  17.   {
  18.     x: "2017-09-04",
  19.     y: 65
  20.   }
  21. ];
  23. ReactDOM.render(
  24.   <ChartCard
  25.     title="支付笔数"
  26.     action={
  27.       <Tooltip title="支付笔数反应交易质量">
  28.         <Icon type="exclamation-circle-o" />
  29.       </Tooltip>
  30.     }
  31.     total="6,500"
  32.     contentHeight={46}
  33.   >
  34.     <MiniBar height={46} data={visitData} />
  35.   </ChartCard>,
  36.   mountNode
  37. );

就可以实现一个最简单的图表组合：

图表 - 图1

使用 BizCharts 绘制图表

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

引入 BizCharts

通过 npm 安装

  1. npm install bizcharts --save

在项目中使用

  1. import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
  3. const data = [...];
  5. <Chart height={400} data={data} forceFit>
  6.   <Axis name="month" />
  7.   <Axis name="temperature" label={{ formatter: val => `${val}°C` }} />
  8.   <Tooltip crosshairs={{ type : "y" }} />
  9.   <Geom type="line" position="month*temperature" size={2} color={'city'} />
  10.   <Geom type='point' position="month*temperature" size={4} color={'city'} />
  11. </Chart>

参看 更多 Demo。