---
order: 6
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',
    score: 4.8,
    studyNum: 1123,
  },
  {
    id: 2,
    name: '新媒体自习课程',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/3a57e295-e831-40d2-802f-c67b05ae31a3.png',
    score: 4.7,
    studyNum: 982,
  },
  {
    id: 3,
    name: '10分钟心理学速成',
    portrait:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/aeaa3f47-aa2c-4f7e-8caf-6ba5d08be0f4.png',
    score: 4.5,
    studyNum: 423,
  },
];

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

export default () => (
  <div style={{ width: 440, height: 300, background: `#181b1c` }}>
    <Charts.OnlineLessonList {...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',
    score: 4.8,
    studyNum: 1123,
  },
];
```