---
order: 7
group:
  title: 图表
  order: 1
---

## 滚动排行

可用于展示排行数据的场景，数据总数超过每页展示数量，默认自动分页滚动

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

const props = {
  data: [
    {
      label: '北京',
      value: 40,
    },
    {
      label: '上海',
      value: 20,
    },
    {
      label: '广州',
      value: 10,
    },
    {
      label: '深圳',
      value: 8,
    },
    {
      label: '成都',
      value: 7,
    },
    {
      label: '苏州',
      value: 6,
    },
  ],
  size: { width: '300px', height: '100px' },
  count: 3,
  unit: '万元',
  textStyle: {
    fontFamily: 'Microsoft Yahei',
    fontWeight: 'normal',
    fontSize: 14,
    color: '#999',
  },
  color2: '#00DEFC',
  color1: '#0086E7',
};

export default () => (
  <div style={{ background: '#000', padding: 20 }}>
    <Charts.RankList {...props} />
  </div>
);
```

## API

| 参数       | 说明       | 类型   |
| ---------- | ---------- | ------ |
| size       | 容器的宽高 | object |
| count      | 数值       | number |
| totalCount | 总数       | number |
| textStyle  | 文字样式   | object |
| data       | 数据       | array  |

### size

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

### data

| 参数  | 说明 | 类型           |
| ----- | ---- | -------------- |
| label | 标签 | number\|string |
| value | 数值 | number\|string |

### textStyle

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