添加 Charts 的文档和DEMO

9 years ago · 8599753c63
12 changed files with 482 additions and 0 deletions
--- a/src/components/Charts/demo/bar.md
+++ 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(
+  <Bar
+    height={200}
+    title="销售额趋势"
+    data={salesData}
+  />
+, mountNode);
+````
--- a/src/components/Charts/demo/chart-card.md
+++ 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(
+  <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);
+````
--- a/src/components/Charts/demo/gauge.md
+++ 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(
+  <Gauge
+    title="核销率"
+    height={164}
+    percent={87}
+  />
+, mountNode);
+````
--- a/src/components/Charts/demo/mini-area.md
+++ 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(
+  <MiniArea
+    line
+    color="#cceafe"
+    height={45}
+    data={visitData}
+  />
+, mountNode);
+````
--- a/src/components/Charts/demo/mini-bar.md
+++ 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(
+  <MiniBar
+    height={45}
+    data={visitData}
+  />
+, mountNode);
+````
--- a/src/components/Charts/demo/mini-pie.md
+++ 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(
+  <Pie
+    percent={28}
+    subTitle="中式快餐"
+    total="28%"
+    height={129}
+  />
+, mountNode);
+````
--- a/src/components/Charts/demo/mini-progress.md
+++ 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(
+  <MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
+, mountNode);
+````
--- a/src/components/Charts/demo/mix.md
+++ 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(
+  <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);
+````
--- a/src/components/Charts/demo/pie.md
+++ 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(
+  <Pie
+    hasLegend
+    title="销售额"
+    subTitle="销售额"
+    total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
+    data={salesPieData}
+    valueFormat={val => yuan(val)}
+    height={294}
+  />
+, mountNode);
+````
--- a/src/components/Charts/demo/radar.md
+++ 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(
+  <ChartCard title="数据比例">
+    <Radar
+      hasLegend
+      height={286}
+      data={radarData}
+    />
+  </ChartCard>
+, mountNode);
+````
--- a/src/components/Charts/demo/waterwave.md
+++ 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(
+  <div style={{textAlign: 'center'}}>
+    <WaterWave
+      height={161}
+      title="补贴资金剩余"
+      percent={34}
+    />
+  </div>
+, mountNode);
+````
--- a/src/components/Charts/index.md
+++ 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 | - |
+
+