Charts图表

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

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

引用方式：

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

详细使用方式请参照：独立使用 pro 组件

代码演示

图表套件组合展示

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

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
);

迷你柱状图

迷你区域图

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);

迷你进度条

迷你进度条

import { MiniProgress } from 'ant-design-pro/lib/Charts';
ReactDOM.render(<MiniProgress percent={78} strokeWidth={8} target={80} />, mountNode);

饼状图

饼状图

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
);

雷达图

雷达图

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
);

水波图

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

import { WaterWave } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
  <div style={{ textAlign: 'center' }}>
    <WaterWave height={161} title="补贴资金剩余" percent={34} />
  </div>,
  mountNode
);

标签云

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

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);

图表卡片

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

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
);

迷你区域图

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

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 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。

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 组合展现更多业务场景。

import { Pie } from 'ant-design-pro/lib/Charts';
ReactDOM.render(<Pie percent={28} subTitle="中式快餐" total="28%" height={140} />, mountNode);

仪表盘

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

import { Gauge } from 'ant-design-pro/lib/Charts';
ReactDOM.render(<Gauge title="核销率" height={164} percent={87} />, mountNode);

带有时间轴的图表

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

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

MiniBar

MiniArea

MiniProgress

Bar

Pie

Radar

Gauge

WaterWave

TagCloud

TimelineChart

Field