---
order: 3
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/dc1d595b-4829-459b-9ba6-efca8e3c0315.png',
    level: 5,
    value: 5400,
    levelImg:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/1fe8ca9a-e386-46b2-ba2e-0e958c4527dc.png',
  },
  {
    id: 2,
    name: '张女士',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/3a57e295-e831-40d2-802f-c67b05ae31a3.png',
    level: 4,
    value: 3000,
    levelImg:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/83b02d83-5f02-4dec-8c35-81fac9c60ca8.png',
  },
  {
    id: 3,
    name: '王先生',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/aeaa3f47-aa2c-4f7e-8caf-6ba5d08be0f4.png',
    level: 3,
    value: 1800,
    levelImg:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/220af7bc-0818-4fe8-8fe1-c16329c2103f.png',
  },
];

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

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

## API

| 参数  | 说明                   | 类型   |
| ----- | ---------------------- | ------ |
| size  | 容器的宽高             | object |
| limit | 显示的数据条数，默认 4 | number |
| data  | 数据源                 | array  |

### size

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

## 数据源格式

```js
[
  {
    id: 1,
    name: '李女士',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc1d595b-4829-459b-9ba6-efca8e3c0315.png',
    level: 5,
    value: 5400,
    levelImg:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/1fe8ca9a-e386-46b2-ba2e-0e958c4527dc.png',
  },
];
```