This article has not been translated, hope that your can PR to translated it. Help us!

Charts图表

Ant Design Pro 提供的业务中常用的图表类型，都是基于 G2 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。

因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 G2 封装图表组件使用。

Usage:

import Charts from 'ant-design-pro/lib/Charts';

Learning more to visit: Using Pro Components Alone

Examples

图表套件组合展示

利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。

expand codeexpand code
import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
import Trend from 'ant-design-pro/lib/Trend';
import NumberInfo from 'ant-design-pro/lib/NumberInfo';
import { Row, Col, Icon, Tooltip } from 'antd';
import numeral from 'numeral';
import moment from 'moment';

const visitData = [];
const beginDay = new Date().getTime();
for (let i = 0; i < 20; i += 1) {
  visitData.push({
    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
    y: Math.floor(Math.random() * 100) + 10,
  });
}

ReactDOM.render(
  <Row>
    <Col span={24}>
      <ChartCard title="搜索用户数量" total={numeral(8846).format('0,0')} contentHeight={134}>
        <NumberInfo
          subTitle={<span>本周访问</span>}
          total={numeral(12321).format('0,0')}
          status="up"
          subTotal={17.1}
        />
        <MiniArea line height={45} data={visitData} />
      </ChartCard>
    </Col>
    <Col span={24} style={{ marginTop: 24 }}>
      <ChartCard
        title="访问量"
        action={
          <Tooltip title="指标说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(8846).format('0,0')}
        footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
        contentHeight={46}
      >
        <MiniBar height={46} data={visitData} />
      </ChartCard>
    </Col>
    <Col span={24} style={{ marginTop: 24 }}>
      <ChartCard
        title="线上购物转化率"
        action={
          <Tooltip title="指标说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total="78%"
        footer={
          <div>
            <span>
              周同比
              <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
                12%
              </Trend>
            </span>
            <span style={{ marginLeft: 16 }}>
              日环比
              <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
                11%
              </Trend>
            </span>
          </div>
        }
        contentHeight={46}
      >
        <MiniProgress percent={78} strokeWidth={8} target={80} />
      </ChartCard>
    </Col>
  </Row>,
  mountNode
);
迷你区域图
迷你区域图
expand codeexpand code
import { MiniArea } from 'ant-design-pro/lib/Charts';
import moment from 'moment';

const visitData = [];
const beginDay = new Date().getTime();
for (let i = 0; i < 20; i += 1) {
  visitData.push({
    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
    y: Math.floor(Math.random() * 100) + 10,
  });
}

ReactDOM.render(<MiniArea line color="#cceafe" height={45} data={visitData} />, mountNode);
迷你进度条
迷你进度条
expand codeexpand code
import { MiniProgress } from 'ant-design-pro/lib/Charts';

ReactDOM.render(<MiniProgress percent={78} strokeWidth={8} target={80} />, mountNode);
饼状图
饼状图
expand codeexpand code
import { Pie, yuan } from 'ant-design-pro/lib/Charts';

const salesPieData = [
  {
    x: '家用电器',
    y: 4544,
  },
  {
    x: '食用酒水',
    y: 3321,
  },
  {
    x: '个护健康',
    y: 3113,
  },
  {
    x: '服饰箱包',
    y: 2341,
  },
  {
    x: '母婴产品',
    y: 1231,
  },
  {
    x: '其他',
    y: 1231,
  },
];

ReactDOM.render(
  <Pie
    hasLegend
    title="销售额"
    subTitle="销售额"
    total={() => (
      <span
        dangerouslySetInnerHTML={{
          __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0)),
        }}
      />
    )}
    data={salesPieData}
    valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
    height={294}
  />,
  mountNode
);
雷达图
雷达图
expand codeexpand code
import { Radar, ChartCard } from 'ant-design-pro/lib/Charts';

const radarOriginData = [
  {
    name: '个人',
    ref: 10,
    koubei: 8,
    output: 4,
    contribute: 5,
    hot: 7,
  },
  {
    name: '团队',
    ref: 3,
    koubei: 9,
    output: 6,
    contribute: 3,
    hot: 1,
  },
  {
    name: '部门',
    ref: 4,
    koubei: 1,
    output: 6,
    contribute: 5,
    hot: 7,
  },
];
const radarData = [];
const radarTitleMap = {
  ref: '引用',
  koubei: '口碑',
  output: '产量',
  contribute: '贡献',
  hot: '热度',
};
radarOriginData.forEach(item => {
  Object.keys(item).forEach(key => {
    if (key !== 'name') {
      radarData.push({
        name: item.name,
        label: radarTitleMap[key],
        value: item[key],
      });
    }
  });
});

ReactDOM.render(
  <ChartCard title="数据比例">
    <Radar hasLegend height={286} data={radarData} />
  </ChartCard>,
  mountNode
);
水波图

水波图是一种比例的展示方式，可以更直观的展示关键值的占比。

expand codeexpand code
import { WaterWave } from 'ant-design-pro/lib/Charts';

ReactDOM.render(
  <div style={{ textAlign: 'center' }}>
    <WaterWave height={161} title="补贴资金剩余" percent={34} />
  </div>,
  mountNode
);
标签云

标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。

expand codeexpand code
import { TagCloud } from 'ant-design-pro/lib/Charts';

const tags = [];
for (let i = 0; i < 50; i += 1) {
  tags.push({
    name: `TagClout-Title-${i}`,
    value: Math.floor(Math.random() * 50) + 20,
  });
}

ReactDOM.render(<TagCloud data={tags} height={200} />, mountNode);
图表卡片

用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。

expand codeexpand code
import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
import Trend from 'ant-design-pro/lib/Trend';
import { Row, Col, Icon, Tooltip } from 'antd';
import numeral from 'numeral';

ReactDOM.render(
  <Row>
    <Col span={24}>
      <ChartCard
        title="销售额"
        action={
          <Tooltip title="指标说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
        contentHeight={46}
      >
        <span>
          周同比
          <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
            12%
          </Trend>
        </span>
        <span style={{ marginLeft: 16 }}>
          日环比
          <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>
            11%
          </Trend>
        </span>
      </ChartCard>
    </Col>
    <Col span={24} style={{ marginTop: 24 }}>
      <ChartCard
        title="移动指标"
        avatar={
          <img
            style={{ width: 56, height: 56 }}
            src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
            alt="indicator"
          />
        }
        action={
          <Tooltip title="指标说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
      />
    </Col>
    <Col span={24} style={{ marginTop: 24 }}>
      <ChartCard
        title="移动指标"
        avatar={
          <img
            alt="indicator"
            style={{ width: 56, height: 56 }}
            src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
          />
        }
        action={
          <Tooltip title="指标说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
      />
    </Col>
  </Row>,
  mountNode
);
迷你柱状图

迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。

expand codeexpand code
import { MiniBar } from 'ant-design-pro/lib/Charts';
import moment from 'moment';

const visitData = [];
const beginDay = new Date().getTime();
for (let i = 0; i < 20; i += 1) {
  visitData.push({
    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
    y: Math.floor(Math.random() * 100) + 10,
  });
}

ReactDOM.render(<MiniBar height={45} data={visitData} />, mountNode);
柱状图

通过设置 x，y 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。

expand codeexpand code
import { Bar } from 'ant-design-pro/lib/Charts';

const salesData = [];
for (let i = 0; i < 12; i += 1) {
  salesData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200,
  });
}

ReactDOM.render(<Bar height={200} title="销售额趋势" data={salesData} />, mountNode);
迷你饼状图

通过简化 Pie 属性的设置，可以快速的实现极简的饼状图，可配合 ChartCard 组合展现更多业务场景。

expand codeexpand code
import { Pie } from 'ant-design-pro/lib/Charts';

ReactDOM.render(<Pie percent={28} subTitle="中式快餐" total="28%" height={140} />, mountNode);
仪表盘

仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。

expand codeexpand code
import { Gauge } from 'ant-design-pro/lib/Charts';

ReactDOM.render(<Gauge title="核销率" height={164} percent={87} />, mountNode);
带有时间轴的图表

使用 TimelineChart 组件可以实现带有时间轴的柱状图展现，而其中的 x 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 y1 和 y2。

expand codeexpand code
import { TimelineChart } from 'ant-design-pro/lib/Charts';

const chartData = [];
for (let i = 0; i < 20; i += 1) {
  chartData.push({
    x: new Date().getTime() + 1000 * 60 * 30 * i,
    y1: Math.floor(Math.random() * 100) + 1000,
    y2: Math.floor(Math.random() * 100) + 10,
  });
}

ReactDOM.render(
  <TimelineChart height={200} data={chartData} titleMap={{ y1: '客流量', y2: '支付笔数' }} />,
  mountNode
);

API#

ChartCard#

参数 说明 类型 默认值
title 卡片标题 ReactNode|string -
action 卡片操作 ReactNode -
total 数据总量 ReactNode | number | function -
footer 卡片底部 ReactNode -
contentHeight 内容区域高度 number -
avatar 右侧图标 React.ReactNode -

MiniBar#

参数 说明 类型 默认值
color 图表颜色 string #1890FF
height 图表高度 number -
data 数据 array<{x, y}> -

MiniArea#

参数 说明 类型 默认值
color 图表颜色 string rgba(24, 144, 255, 0.2)
borderColor 图表边颜色 string #1890FF
height 图表高度 number -
line 是否显示描边 boolean false
animate 是否显示动画 boolean true
xAxis x 轴配置 object -
yAxis y 轴配置 object -
data 数据 array<{x, y}> -

MiniProgress#

参数 说明 类型 默认值
target 目标比例 number -
color 进度条颜色 string -
strokeWidth 进度条高度 number -
percent 进度比例 number -

Bar#

参数 说明 类型 默认值
title 图表标题 ReactNode|string -
color 图表颜色 string rgba(24, 144, 255, 0.85)
padding 图表内部间距 array 'auto'
height 图表高度 number -
data 数据 array<{x, y}> -
autoLabel 在宽度不足时，自动隐藏 x 轴的 label boolean true

Pie#

参数 说明 类型 默认值
animate 是否显示动画 boolean true
color 图表颜色 string rgba(24, 144, 255, 0.85)
height 图表高度 number -
hasLegend 是否显示 legend boolean false
padding 图表内部间距 array 'auto'
percent 占比 number -
tooltip 是否显示 tooltip boolean true
valueFormat 显示值的格式化函数 function -
title 图表标题 ReactNode|string -
subTitle 图表子标题 ReactNode|string -
total 图标中央的总数 string function

Radar#

参数 说明 类型 默认值
title 图表标题 ReactNode|string -
height 图表高度 number -
hasLegend 是否显示 legend boolean false
padding 图表内部间距 array 'auto'
data 图标数据 array<{name,label,value}> -

Gauge#

参数 说明 类型 默认值
title 图表标题 ReactNode|string -
height 图表高度 number -
color 图表颜色 string #2F9CFF
bgColor 图表背景颜色 string #F0F2F5
percent 进度比例 number -

WaterWave#

参数 说明 类型 默认值
title 图表标题 ReactNode|string -
height 图表高度 number -
color 图表颜色 string #1890FF
percent 进度比例 number -

TagCloud#

参数 说明 类型 默认值
data 标题 Array<name, value> -
height 高度值 number -

TimelineChart#

参数 说明 类型 默认值
data 标题 Array<x, y1, y2> -
titleMap 指标别名 Object{y1: '客流量', y2: '支付笔数'} -
height 高度值 number 400

Field#

参数 说明 类型 默认值
label 标题 ReactNode|string -
value 值 ReactNode|string -
AvatarListCountDown