Skip to content

GitLab

P
pro-blocks
Commit 8599753c authored by nikogu's avatar nikogu
Browse files
Options

添加 Charts 的文档和DEMO

parent 7b8ea8df
Hide whitespace changes
Inline Side-by-side
Showing with 482 additions and 0 deletions
src/components/Charts/demo/bar.md 0 → 100644
View file @ 8599753c
---
order: 4
title: 柱状图
---
````jsx
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);
````
src/components/Charts/demo/chart-card.md 0 → 100644
View file @ 8599753c
---
order: 1
title: 图表卡片
---
用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
````jsx
import { ChartCard, yuan, Field, Trend } from 'ant-design-pro/lib/Charts';
import { Tooltip, Icon } from 'antd';
import numeral from 'numeral';
ReactDOM.render(
<ChartCard
title="销售额"
action={<Tooltip title="我是一段说明"><Icon type="exclamation-circle-o" /></Tooltip>}
total={yuan(126560)}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
contentHeight={46}
>
<Trend colorType="gray">
<Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
<Trend.Item title="日环比" flag="down">11%</Trend.Item>
</Trend>
</ChartCard>
, mountNode);
````
src/components/Charts/demo/gauge.md 0 → 100644
View file @ 8599753c
---
order: 7
title: 仪表盘
---
````jsx
import { Gauge } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<Gauge
title="核销率"
height={164}
percent={87}
/>
, mountNode);
````
src/components/Charts/demo/mini-area.md 0 → 100644
View file @ 8599753c
---
order: 2
title: 迷你区域图
---
````jsx
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);
````
src/components/Charts/demo/mini-bar.md 0 → 100644
View file @ 8599753c
---
order: 2
title: 迷你柱状图
---
````jsx
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);
````
src/components/Charts/demo/mini-pie.md 0 → 100644
View file @ 8599753c
---
order: 6
title: 迷你饼状图
---
````jsx
import { Pie } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<Pie
percent={28}
subTitle="中式快餐"
total="28%"
height={129}
/>
, mountNode);
````
src/components/Charts/demo/mini-progress.md 0 → 100644
View file @ 8599753c
---
order: 3
title: 迷你进度条
---
````jsx
import { MiniProgress } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
, mountNode);
````
src/components/Charts/demo/mix.md 0 → 100644
View file @ 8599753c
---
order: 0
title: 图表套件组合展示
---
利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
````jsx
import { ChartCard, yuan, Field, Trend, NumberInfo, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
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 gutter={16}>
<Col span={8}>
<ChartCard
title="搜索用户数量"
contentHeight={134}
>
<NumberInfo
subTitle={<span>本周访问</span>}
total={numeral(12321).format('0,0')}
status="up"
subTotal={17.1}
/>
<MiniArea
line
color="#cceafe"
height={45}
data={visitData}
/>
</ChartCard>
</Col>
<Col span={8}>
<ChartCard
title="访问量"
action={<Tooltip title="访问量是关键指标"><Icon type="exclamation-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={8}>
<ChartCard
title="线上购物转化率"
action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>}
total="78%"
footer={<Trend>
<Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
<Trend.Item title="日环比" flag="down">11%</Trend.Item>
</Trend>}
contentHeight={46}
>
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
</ChartCard>
</Col>
</Row>
, mountNode);
````
src/components/Charts/demo/pie.md 0 → 100644
View file @ 8599753c
---
order: 5
title: 饼状图
---
````jsx
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={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
data={salesPieData}
valueFormat={val => yuan(val)}
height={294}
/>
, mountNode);
````
src/components/Charts/demo/radar.md 0 → 100644
View file @ 8599753c
---
order: 7
title: 雷达图
---
````jsx
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);
````
src/components/Charts/demo/waterwave.md 0 → 100644
View file @ 8599753c
---
order: 8
title: 水波图
---
````jsx
import { WaterWave } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<div style={{textAlign: 'center'}}>
<WaterWave
height={161}
title="补贴资金剩余"
percent={34}
/>
</div>
, mountNode);
````
src/components/Charts/index.md 0 → 100644
View file @ 8599753c
---
category: Components
type: General
title: Charts
subtitle: 图表
cols: 1
---
Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。
因为结合了 Ant Design 的标准设计，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。
## API
### ChartCard
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 卡片标题 | ReactNode\|string | - |
| action | 卡片操作 | ReactNode | - |
| total | 数据总量 | ReactNode \| number | - |
| footer | 卡片底部 | ReactNode | - |
| contentHeight | 内容区域高度 | number | - |
### MiniBar
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| color | 图表颜色 | string | `#33abfb` |
| height | 图表高度 | number | - |
| data | 数据 | array<{x, y}> | - |
### MiniArea
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| color | 图表颜色 | string | `#33abfb` |
| height | 图表高度 | number | - |
| line | 是否显示描边 | boolean | false |
| animate | 是否显示动画 | boolean | true |
| xAxis | [x 轴配置](https://antv.alipay.com/g2/doc/tutorial/start/axis.html) | object | - |
| yAxis | [y 轴配置](https://antv.alipay.com/g2/doc/tutorial/start/axis.html) | object | - |
| data | 数据 | array<{x, y}> | - |
### MiniProgress
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| target | 目标比例 | number | - |
| color | 进度条颜色 | string | - |
| strokeWidth | 进度条高度 | number | - |
| percent | 进度比例 | number | - |
### Bar
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 图表标题 | ReactNode\|string | - |
| color | 图表颜色 | string | `#33abfb` |
| margin | 图表内部间距 | array | \[32, 0, 32, 40\] |
| height | 图表高度 | number | - |
| data | 数据 | array<{x, y}> | - |
### Pie
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| animate | 是否显示动画 | boolean | true |
| color | 图表颜色 | string | `#0096fa` |
| height | 图表高度 | number | - |
| hasLegend | 是否显示 legend | boolean | `false` |
| margin | 图表内部间距 | array | \[32, 0, 32, 40\] |
| percent | 占比 | number | - |
| title | 图表标题 | ReactNode\|string | - |
| tooltip | 是否显示 tooltip | boolean | true |
| valueFormat | 显示值的格式化函数 | function | - |
| subTitle | 图表子标题 | ReactNode\|string | - |
### Radar
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 图表标题 | ReactNode\|string | - |
| height | 图表高度 | number | - |
| hasLegend | 是否显示 legend | boolean | `false` |
| margin | 图表内部间距 | array | \[16, 0, 16, 0\] |
### Gauge
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 图表标题 | ReactNode\|string | - |
| height | 图表高度 | number | - |
| color | 图表颜色 | string | `#00b1f8` |
| bgColor | 图表北京颜色 | string | `#d3f3fe` |
| percent | 进度比例 | number | - |
### WaterWave
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 图表标题 | ReactNode\|string | - |
| height | 图表高度 | number | - |
| color | 图表颜色 | string | `#19AFFA` |
| percent | 进度比例 | number | - |
### Trend
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 标题 | ReactNode\|string | - |
| flag | 上升下降标识 | boolean | - |
### NumberInfo
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 标题 | ReactNode\|string | - |
| subTitle | 子标题 | ReactNode\|string | - |
| total | 总量 | ReactNode\|string | - |
| status | 增加状态 | 'up'\/'down' | - |
| theme | 状态样式 | string | 'light' |
### Field
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| label | 标题 | ReactNode\|string | - |
| value | 值 | ReactNode\|string | - |
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment