From 8599753c634910d701eb3353afbc46a321101247 Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Wed, 20 Sep 2017 16:45:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20Charts=20=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=92=8CDEMO?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Charts/demo/bar.md | 24 ++++ src/components/Charts/demo/chart-card.md | 27 ++++ src/components/Charts/demo/gauge.md | 16 +++ src/components/Charts/demo/mini-area.md | 27 ++++ src/components/Charts/demo/mini-bar.md | 25 ++++ src/components/Charts/demo/mini-pie.md | 17 +++ src/components/Charts/demo/mini-progress.md | 12 ++ src/components/Charts/demo/mix.md | 74 +++++++++++ src/components/Charts/demo/pie.md | 47 +++++++ src/components/Charts/demo/radar.md | 64 ++++++++++ src/components/Charts/demo/waterwave.md | 18 +++ src/components/Charts/index.md | 131 ++++++++++++++++++++ 12 files changed, 482 insertions(+) create mode 100644 src/components/Charts/demo/bar.md create mode 100644 src/components/Charts/demo/chart-card.md create mode 100644 src/components/Charts/demo/gauge.md create mode 100644 src/components/Charts/demo/mini-area.md create mode 100644 src/components/Charts/demo/mini-bar.md create mode 100644 src/components/Charts/demo/mini-pie.md create mode 100644 src/components/Charts/demo/mini-progress.md create mode 100644 src/components/Charts/demo/mix.md create mode 100644 src/components/Charts/demo/pie.md create mode 100644 src/components/Charts/demo/radar.md create mode 100644 src/components/Charts/demo/waterwave.md create mode 100644 src/components/Charts/index.md diff --git a/src/components/Charts/demo/bar.md b/src/components/Charts/demo/bar.md new file mode 100644 index 00000000..ea860076 --- /dev/null +++ b/src/components/Charts/demo/bar.md @@ -0,0 +1,24 @@ +--- +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( + +, mountNode); +```` diff --git a/src/components/Charts/demo/chart-card.md b/src/components/Charts/demo/chart-card.md new file mode 100644 index 00000000..519426f7 --- /dev/null +++ b/src/components/Charts/demo/chart-card.md @@ -0,0 +1,27 @@ +--- +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( + } + total={yuan(126560)} + footer={} + contentHeight={46} + > + + 12.3% + 11% + + +, mountNode); +```` diff --git a/src/components/Charts/demo/gauge.md b/src/components/Charts/demo/gauge.md new file mode 100644 index 00000000..9b82298d --- /dev/null +++ b/src/components/Charts/demo/gauge.md @@ -0,0 +1,16 @@ +--- +order: 7 +title: 仪表盘 +--- + +````jsx +import { Gauge } from 'ant-design-pro/lib/Charts'; + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Charts/demo/mini-area.md b/src/components/Charts/demo/mini-area.md new file mode 100644 index 00000000..d1de460b --- /dev/null +++ b/src/components/Charts/demo/mini-area.md @@ -0,0 +1,27 @@ +--- +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( + +, mountNode); +```` diff --git a/src/components/Charts/demo/mini-bar.md b/src/components/Charts/demo/mini-bar.md new file mode 100644 index 00000000..9a384fc6 --- /dev/null +++ b/src/components/Charts/demo/mini-bar.md @@ -0,0 +1,25 @@ +--- +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( + +, mountNode); +```` diff --git a/src/components/Charts/demo/mini-pie.md b/src/components/Charts/demo/mini-pie.md new file mode 100644 index 00000000..0a76e3c4 --- /dev/null +++ b/src/components/Charts/demo/mini-pie.md @@ -0,0 +1,17 @@ +--- +order: 6 +title: 迷你饼状图 +--- + +````jsx +import { Pie } from 'ant-design-pro/lib/Charts'; + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Charts/demo/mini-progress.md b/src/components/Charts/demo/mini-progress.md new file mode 100644 index 00000000..daca766a --- /dev/null +++ b/src/components/Charts/demo/mini-progress.md @@ -0,0 +1,12 @@ +--- +order: 3 +title: 迷你进度条 +--- + +````jsx +import { MiniProgress } from 'ant-design-pro/lib/Charts'; + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md new file mode 100644 index 00000000..5ec7e9a2 --- /dev/null +++ b/src/components/Charts/demo/mix.md @@ -0,0 +1,74 @@ +--- +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( + + + + 本周访问} + total={numeral(12321).format('0,0')} + status="up" + subTotal={17.1} + /> + + + + + } + total={numeral(8846).format('0,0')} + footer={} + contentHeight={46} + > + + + + + } + total="78%" + footer={ + 12.3% + 11% + } + contentHeight={46} + > + + + + +, mountNode); +```` diff --git a/src/components/Charts/demo/pie.md b/src/components/Charts/demo/pie.md new file mode 100644 index 00000000..3cf89f43 --- /dev/null +++ b/src/components/Charts/demo/pie.md @@ -0,0 +1,47 @@ +--- +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( + now.y + pre, 0))} + data={salesPieData} + valueFormat={val => yuan(val)} + height={294} + /> +, mountNode); +```` diff --git a/src/components/Charts/demo/radar.md b/src/components/Charts/demo/radar.md new file mode 100644 index 00000000..75c911f3 --- /dev/null +++ b/src/components/Charts/demo/radar.md @@ -0,0 +1,64 @@ +--- +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( + + + +, mountNode); +```` diff --git a/src/components/Charts/demo/waterwave.md b/src/components/Charts/demo/waterwave.md new file mode 100644 index 00000000..742a6c7d --- /dev/null +++ b/src/components/Charts/demo/waterwave.md @@ -0,0 +1,18 @@ +--- +order: 8 +title: 水波图 +--- + +````jsx +import { WaterWave } from 'ant-design-pro/lib/Charts'; + +ReactDOM.render( +
+ +
+, mountNode); +```` diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md new file mode 100644 index 00000000..47a13d5a --- /dev/null +++ b/src/components/Charts/index.md @@ -0,0 +1,131 @@ +--- +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 | - | + + -- GitLab