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

## 科技风 - 数值列表组件

##含图标

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

const props = {
  data: [
    {
      title: '退休党员',
      value: 1895,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '在职党员',
      value: 314,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '其它',
      value: 119,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/65e55010-ceab-4f01-9e8c-dc6e622d3b06.png',
    },
  ],
  document: '共计',
  showIcon: true,
};

export default () => (
  <div
    style={{
      background: '#181B1D',
      width: '100%',
      height: 300,
      padding: 50,
      display: 'flex',
      justifyContent: 'center',
    }}
  >
    <Charts.SCScaleCard {...props} />
  </div>
);
```

##无图标纯文本

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

const props = {
  data: [
    {
      title: '退休党员',
      value: 1895,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '在职党员',
      value: 314,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '其它',
      value: 119,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/65e55010-ceab-4f01-9e8c-dc6e622d3b06.png',
    },
  ],
  document: '共计',
  showIcon: false,
};

export default () => (
  <div
    style={{
      background: '#181B1D',
      width: '100%',
      height: 300,
      padding: 50,
      display: 'flex',
      justifyContent: 'center',
    }}
  >
    <Charts.SCScaleCard {...props} />
  </div>
);
```

## 滚动排行组件

## 含图标

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

const props = {
  data: [
    {
      title: '退休党员',
      value: 1895,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '在职党员',
      value: 314,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '其它',
      value: 119,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/65e55010-ceab-4f01-9e8c-dc6e622d3b06.png',
    },
  ],
  hasProgress: true,
  showIcon: true,
  document: '占用率',
};

export default () => (
  <div
    style={{
      background: '#181B1D',
      width: '100%',
      height: 300,
      padding: 50,
      display: 'flex',
      justifyContent: 'center',
    }}
  >
    <Charts.SCScaleCard {...props} />
  </div>
);
```

## 含图标

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

const props = {
  data: [
    {
      title: '退休党员',
      value: 1895,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '在职党员',
      value: 314,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '其它',
      value: 119,
      unit: '人',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/65e55010-ceab-4f01-9e8c-dc6e622d3b06.png',
    },
  ],
  hasProgress: true,
  document: '占用率',
  showIcon: false,
};

export default () => (
  <div
    style={{
      background: '#181B1D',
      width: '100%',
      height: 300,
      padding: 50,
      display: 'flex',
      justifyContent: 'center',
    }}
  >
    <Charts.SCScaleCard {...props} />
  </div>
);
```

## API

| 参数        | 说明                   | 类型    |
| ----------- | ---------------------- | ------- |
| size        | 容器的宽高             | object  |
| limit       | 显示的数据条数，默认 4 | number  |
| data        | 数据源                 | array   |
| document    | 统计文案               | string  |
| hasProgress | 是否展示进度条类型     | boolean |
| showIcon    | 是否显示图标           | boolean |

### size

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

### data

| 参数   | 说明      | 类型   |
| ------ | --------- | ------ |
| title  | 标题      | string |
| value  | 数值      | string |
| unit   | 单位      | string |
| imgUrl | icon 地址 | string |

## 数据源格式

```js
[
  {
    title: '其它',
    value: 119,
    unit: '人',
    imgUrl:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/65e55010-ceab-4f01-9e8c-dc6e622d3b06.png',
  },
];
```