---
order: 5
group:
  title: 文本
  order: 40
---

## 事件列表

根据数据展示列表，可改变背景色、个数。<br/>
超出默认显示省略号，鼠标悬浮默认展示完整内容，高度、宽度默认铺满.<br/>
每行的高度为总高度除以展示的个数。

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

const props = {
  data: [
    {
      label: '如心小镇·香樟园发生周界入侵告警',
      value: '04-09 10:25',
    },
    {
      label: '如心小镇·商业中心发生火情告警',
      value: '04-09 10:09',
    },
    {
      label: '如心小镇·香枫园发生人员徘徊',
      value: '04-09 10:05',
    },
    {
      label: '如心小镇·留香园发生液压偏低',
      value: '04-09 10:00',
    },
    {
      label: '如心小镇·香樟园发生周界入侵',
      value: '04-09 09:22',
    },
  ],
  size: { width: '330px', height: '200px' },
  count: 5,
  textStyle: {
    fontFamily: 'Microsoft Yahei',
    fontWeight: 'normal',
    fontSize: 14,
    color: '#fff',
  },
  marginBottom: 1,
  firstRowColor: 'red',
  background: '#1890ff',
};

export default () => <Charts.EventList {...props} />;
```

## API

| 参数         | 说明       | 类型   | 默认值 |
| ------------ | ---------- | ------ | ------ |
| size         | 容器的宽高 | object |
| count        | 数值       | number | 3      |
| data         | 数据源     | array  | []     |
| textStyle    | 文字样式   | object |
| background   | 列表背景   | string | #0005  |
| marginBottom | 底部间距   | number | 0      |

### size

| 参数   | 说明 | 类型           | 默认值 |
| ------ | ---- | -------------- | ------ |
| width  | 宽度 | number\|string | 300px  |
| height | 高度 | number\|string | 200px  |

### data

| 参数  | 说明       | 类型           |
| ----- | ---------- | -------------- |
| label | 左边的文字 | number\|string |
| value | 右边的文字 | number\|string |

### textStyle

| 参数       | 说明     | 类型   |
| ---------- | -------- | ------ |
| fontSize   | 字体大小 | number |
| fontFamily | 字体     | string |
| color      | 字体颜色 | string |
| fontWeight | 字体粗细 | string |