Commit df6ecfb4 authored by nikogu's avatar nikogu

update charts demo

parent a8f3a075
......@@ -9,10 +9,10 @@ title: 基础样例
import AvatarList from 'ant-design-pro/lib/AvatarList';
ReactDOM.render(
<AvatarList size="small">
<AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
<AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png" />
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png" />
<AvatarList size="mini">
<AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
<AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
<AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
</AvatarList>
, mountNode);
````
......@@ -10,12 +10,16 @@
}
.avatarItem {
border: 1px solid #fff;
display: inline-block;
font-size: @font-size-base;
margin-left: -8px;
width: @avatar-size-base;
height: @avatar-size-base;
:global {
.ant-avatar {
border: 1px solid #fff;
}
}
}
.avatarItemLarge {
......
......@@ -5,7 +5,7 @@ order: 1
cols: 1
---
一组用户头像,常用在项目/团队成员列表。
一组用户头像,常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
## API
......@@ -13,7 +13,7 @@ cols: 1
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| size | 头像大小 | `large``small` | - |
| size | 头像大小 | `large``small` `mini`, `default` | `default` |
### AvatarList.Item
......
......@@ -25,6 +25,7 @@
height: 38px;
}
.content {
margin-bottom: 12px;
position: relative;
width: 100%;
}
......@@ -37,7 +38,7 @@
.footer {
border-top: 1px solid @border-color-split;
padding-top: 9px;
margin-top: 20px;
margin-top: 8px;
& > * {
position: relative;
}
......
......@@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
import styles from './index.less';
const MiniProgress = ({ target, color, strokeWidth, percent }) => (
const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
<div className={styles.miniProgress}>
<Tooltip title={`目标值: ${target}%`}>
<div
......
......@@ -14,7 +14,7 @@ import numeral from 'numeral';
ReactDOM.render(
<ChartCard
title="销售额"
action={<Tooltip title="我是一段说明"><Icon type="exclamation-circle-o" /></Tooltip>}
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={yuan(126560)}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
contentHeight={46}
......
......@@ -7,6 +7,6 @@ title: 迷你进度条
import { MiniProgress } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
<MiniProgress percent={78} strokeWidth={8} target={80} />
, mountNode);
````
......@@ -37,7 +37,6 @@ ReactDOM.render(
/>
<MiniArea
line
color="#cceafe"
height={45}
data={visitData}
/>
......@@ -46,7 +45,7 @@ ReactDOM.render(
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="访问量"
action={<Tooltip title="访问量是关键指标"><Icon type="exclamation-circle-o" /></Tooltip>}
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}
......@@ -60,7 +59,7 @@ ReactDOM.render(
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="线上购物转化率"
action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>}
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total="78%"
footer={
<div>
......@@ -76,7 +75,7 @@ ReactDOM.render(
}
contentHeight={46}
>
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
<MiniProgress percent={78} strokeWidth={8} target={80} />
</ChartCard>
</Col>
</Row>
......
......@@ -11,7 +11,7 @@ import { TagCloud } from 'ant-design-pro/lib/Charts';
const tags = [];
for (let i = 0; i < 50; i += 1) {
tags.push({
name: `test-${i}`,
name: `TagClout-Title-${i}`,
value: Math.floor((Math.random() * 50)) + 20,
});
}
......
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