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

## 科技风 - 关键数值组件

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

const props = {
  data: [
    {
      title: '建筑用水量',
      value: 52431,
      unit: 'm³',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '建筑用电量',
      value: 1122,
      unit: 'KW.h',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '二氧化碳排放量',
      value: 111111,
      unit: 'kg',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/65e55010-ceab-4f01-9e8c-dc6e622d3b06.png',
    },
    {
      title: '太阳能发电量',
      value: 666666,
      unit: 'KW.h',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/101d654a-95b7-4ae5-ae09-e1f78c0e5536.png',
    },
  ],

  theme: {
    primaryAlign: 'center',

    textColor: '#ddd',

    primaryColor: '#50E113',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E113', '#FDAFFF', '#DDD'],
  },
};

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

### 无图标

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

const props = {
  data: [
    {
      title: '建筑用水量',
      value: 52431,
      unit: 'm³',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '建筑用电量',
      value: 1122,
      unit: 'KW.h',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
    },
    {
      title: '二氧化碳排放量',
      value: 111111,
      unit: 'kg',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/65e55010-ceab-4f01-9e8c-dc6e622d3b06.png',
    },
    {
      title: '太阳能发电量',
      value: 666666,
      unit: 'KW.h',
      imgUrl:
        'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/101d654a-95b7-4ae5-ae09-e1f78c0e5536.png',
    },
  ],

  theme: {
    primaryAlign: 'left',
  },
  showIcon: false,
};

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

## API

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

### size

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

## 数据源格式

```js
[
  {
    title: '建筑用电量',
    value: 1122,
    unit: 'KW.h',
    imgUrl:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/dc01d4de-9437-4658-88c9-a3b70bd7afc9.png',
  },
];
```