Commit df6ecfb4 authored by nikogu's avatar nikogu

update charts demo

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