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

## 科技风 - 文本块

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

const props = {
  data: [
    {
      title: '地面车位',
      value: [20, 22],
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/ccda697a-b32d-4bdd-8325-9d8097968fae.png',
    },
    {
      title: '地下车位',
      value: [84, 46],
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/ccda697a-b32d-4bdd-8325-9d8097968fae.png',
    },
    {
      title: '机械车位',
      value: [40, 48],
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/ccda697a-b32d-4bdd-8325-9d8097968fae.png',
    },
  ],
  size: {
    width: '100%',
    height: 60,
  },
  prevText: '可使用',
  afterText: '使用中',
};

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

## API

| 参数  | 说明                   | 类型   |
| ----- | ---------------------- | ------ |
| size  | 容器的宽高             | object |
| limit | 显示的数据条数，默认 4 | number |
| color | 星星样色，默认 #FF9900 | string |
| data  | 数据源                 | array  |

### size

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

## 数据源格式

```js
[
  {
    id: 1,
    title: '政策研究评分',
    value: 4.4,
  },
];
```