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 提供的图表套件,可以灵活组合符合设计规范的图表来满足复杂的业务需求。

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

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

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 属性,则是时间值的指向,默认最多支持同时展现两个指标,分别是 y1y2

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 -