add SimpleCard style to fixed: https://github.com/ant-design/ant-design-pro/issues/192

src/components/Charts/ChartCard/index.js

 import React from 'react';
 import { Card, Spin } from 'antd';
+import classNames from 'classnames';
 
 import styles from './index.less';
 
 const ChartCard = ({
-  loading = false, contentHeight, title, action, total, footer, children, ...rest
+  loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
 }) => {
   const content = (
     <div className={styles.chartCard}>
+      <div
+        className={classNames(styles.chartTop, { [styles.chartTopMargin]: (!children && !footer) })}
+      >
+        <div className={styles.avatar}>
+          {
+            avatar
+          }
+        </div>
+        <div className={styles.metaWrap}>
           <div className={styles.meta}>
             <span className={styles.title}>{title}</span>
             <span className={styles.action}>{action}</span>
           </div>
           {
             // eslint-disable-next-line
-        total && <div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />
+            total && (<div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />)
           }
+        </div>
+      </div>
+      {
+        children && (
           <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
             <div className={contentHeight && styles.contentFixed}>
               {children}
             </div>
           </div>
+        )
+      }
       {
         footer && (
-          <div className={styles.footer}>
+          <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
             {footer}
           </div>
         )

src/components/Charts/ChartCard/index.less

@@ -2,10 +2,32 @@
 
 .chartCard {
   position: relative;
+  .chartTop {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+  .chartTopMargin {
+    margin-bottom: 12px;
+  }
+  .chartTopHasMargin {
+    margin-bottom: 20px;
+  }
+  .metaWrap {
+    float: left;
+  }
+  .avatar {
+    position: relative;
+    top: 4px;
+    float: left;
+    margin-right: 20px;
+    img {
+      border-radius: 100%;
+    }
+  }
   .meta {
     color: @text-color-secondary;
     font-size: @font-size-base;
-    position: relative;
     line-height: 22px;
     height: 22px;
   }
@@ -46,4 +68,7 @@
       position: relative;
     }
   }
+  .footerMargin {
+    margin-top: 20px;
+  }
 }

src/components/Charts/demo/chart-card.md

@@ -8,10 +8,12 @@ title: 图表卡片
 ````jsx
 import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
 import Trend from 'ant-design-pro/lib/Trend';
-import { Tooltip, Icon } from 'antd';
+import { Row, Col, Icon, Tooltip } from 'antd';
 import numeral from 'numeral';
 
 ReactDOM.render(
+  <Row>
+    <Col span={24}>
       <ChartCard
         title="销售额"
         action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
@@ -28,5 +30,24 @@ ReactDOM.render(
           <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
         </span>
       </ChartCard>
+    </Col>
+    <Col span={24} style={{ marginTop: 24 }}>
+      <ChartCard
+        title="移动指标"
+        avatar={<img style={{ width: 56, height: 56 }} src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />}
+        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
+        total={yuan(126560)}
+        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+      />
+    </Col>
+    <Col span={24} style={{ marginTop: 24 }}>
+      <ChartCard
+        title="移动指标"
+        avatar={<img style={{ width: 56, height: 56 }} src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" />}
+        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
+        total={yuan(126560)}
+      />
+    </Col>
+  </Row>
 , mountNode);
 ````