---
order: 4
group:
  title: 列表
  order: 50
---

## 健康达人列表

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const data = [
  {
    id: 1,
    name: '王先生',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/aeaa3f47-aa2c-4f7e-8caf-6ba5d08be0f4.png',
    value: 23047,
  },
  {
    id: 2,
    name: '张女士',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/7a3142a2-86c2-443d-a5c4-4852b739e0ea.png',
    value: 21047,
  },
  {
    id: 3,
    name: '赵女士',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/c51bedc1-419c-4070-98c3-512e67ef2fcb.png',
    value: 19876,
  },
];

const props = {
  data,
  limit: 4,
  size: {
    width: '100%',
    height: '100%',
  },
};

export default () => (
  <div style={{ width: 440, height: 300, background: `#181b1c` }}>
    <Charts.HealthList {...props} />
  </div>
);
```

## API

| 参数     | 说明                   | 类型   |
| -------- | ---------------------- | ------ |
| size     | 容器的宽高             | object |
| limit    | 显示的数据条数，默认 4 | number |
| data     | 数据源                 | array  |
| subTitle | 子标题                 | string |
| unit     | 单位                   | string |

### size

| 参数   | 说明 | 类型           |
| ------ | ---- | -------------- |
| width  | 宽度 | number\|string |
| height | 高度 | number\|string |

## 数据源格式

```js
[
  {
    id: 1,
    name: '王先生',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/aeaa3f47-aa2c-4f7e-8caf-6ba5d08be0f4.png',
    value: 23047,
  },
];
```