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

## 通用列表

默认用法:
列表展示、超出部分自动轮播，每行默认平分高度

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

const data = [
  {
    name: '1月',
    pv: '78',
    attribute: '红',
  },
  {
    name: '2月',
    pv: '34',
    attribute: '橙色',
  },
  {
    name: '3月',
    pv: '100',
    attribute: '黄',
  },
  {
    name: '4月',
    pv: '204',
    attribute: '绿色',
  },
  {
    name: '5月',
    pv: '788',
    attribute: '绿色',
  },
];
const columns = [
  {
    title: '月份',
    dataIndex: 'name',
    width: '30%',
  },
  {
    title: 'pv',
    dataIndex: 'pv',
    width: '30%',
  },
  {
    title: '特征',
    dataIndex: 'attribute',
    width: '30%',
  },
];
const props = {
  data,
  columns,
  size: {
    height: 200,
  },
};

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

设置表头、轮播、背景等

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

const data = [
  {
    name: '1月',
    pv: '78',
    attribute: '红',
  },
  {
    name: '2月',
    pv: '34',
    attribute: '橙色',
  },
  {
    name: '3月',
    pv: '100',
    attribute: '黄',
  },
  {
    name: '4月',
    pv: '204',
    attribute: '绿色',
  },
  {
    name: '5月',
    pv: '788',
    attribute: '绿色',
  },
];
const columns = [
  {
    title: '月份',
    dataIndex: 'name',
    width: '30%',
  },
  {
    title: 'pv',
    dataIndex: 'pv',
    width: '30%',
  },
  {
    title: '特征',
    dataIndex: 'attribute',
    width: '30%',
  },
];
const props = {
  data,
  columns,
  rowCount: 4,
  showHeader: false,
  headerStyle: {
    background: 'rgba(0, 0, 0, 0.5)',
    color: '#fff',
  },
  isLoop: false,
  rowStyle: {
    background: 'rgba(0, 0, 0, 0.3)',
    color: '#fff',
    textAlign: 'left',
    marginBottom: 2,
    firstRowColor: 'rgba(0,0,0,0.5)',
  },
  size: {
    height: 200,
  },
};

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

奇偶行配置

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

const data = [
  {
    name: '1月',
    pv: '78',
    attribute: '红',
  },
  {
    name: '2月',
    pv: '34',
    attribute: '橙色',
  },
  {
    name: '3月',
    pv: '100',
    attribute: '黄',
  },
  {
    name: '4月',
    pv: '204',
    attribute: '绿色',
  },
  {
    name: '5月',
    pv: '788',
    attribute: '绿色',
  },
];
const columns = [
  {
    title: '月份',
    dataIndex: 'name',
    width: '30%',
  },
  {
    title: 'pv',
    dataIndex: 'pv',
    width: '30%',
  },
  {
    title: '特征',
    dataIndex: 'attribute',
    width: '30%',
  },
];
const props = {
  data,
  columns,
  rowCount: 4,
  showHeader: false,
  headerStyle: {
    background: 'rgba(0, 0, 0, 0.5)',
    color: '#fff',
  },
  isLoop: false,
  rowStyle: {
    oddEvenOpen: true,
    oddBackground: 'rgba(0, 0, 0, .4)',
    evenBackground: 'rgba(0, 0, 0, .7)',
    background: 'rgba(0, 0, 0, 0.3)',
    color: '#fff',
    textAlign: 'left',
    marginBottom: 2,
    firstRowColor: 'rgba(0,0,0,0.5)',
  },
  size: {
    height: 200,
  },
};

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

## API

| 参数        | 说明                      | 类型    |
| ----------- | ------------------------- | ------- |
| size        | 容器的宽高                | object  |
| rowCount    | 显示的数据条数，默认 4    | number  |
| isLoop      | 是否循环展示，默认 true   | boolean |
| showHeader  | 是否展示列表头，默认 true | boolean |
| headerStyle | 表头样式                  | object  |
| rowStyle    | 行文字样式                | object  |
| columns     | 列的定义                  | array   |
| data        | 数据源                    | array   |

### size

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

### headerStyle

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

### rowStyle

| 参数           | 说明         | 类型    |
| -------------- | ------------ | ------- |
| fontSize       | 字体大小     | number  |
| fontFamily     | 字体         | string  |
| color          | 字体颜色     | string  |
| fontWeight     | 字体粗细     | string  |
| background     | 背景色       | string  |
| oddEvenOpen    | 奇偶行开启   | boolean | false |
| oddBackground  | 奇数行背景色 | string  | rgba(0, 0, 0, .4) |
| evenBackground | 偶数行背景色 | string  | rgba(0, 0, 0, .7) |

### columns

| 参数      | 说明                 | 类型   |
| --------- | -------------------- | ------ |
| title     | 表头展示的列名       | string |
| dataIndex | 对应 data 中的字段名 | string |
| width     | 列宽度               | string |