open-library/src/ScaleBar/index.md

开放组件库

### 默认

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => <ScaleBar title="这里是标题" />;
```

### 当前高亮的指标位置

根据当前的数组下标，高亮当前的位置

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => <ScaleBar current={2} />;
```

### 类型

分级指标刻度类型，支持渐变颜色

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => (
  <ScaleBar
    type="degree"
    percent={79}
    strokeColor={{ '0%': 'rgb(16, 142, 233)', '100%': 'rgb(135, 208, 104)' }}
  />
);
```

### 更换文字

根据数组生成区间 `['低','中','高']` ，支持 dom 写法

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => (
  <ScaleBar textarea={[<span>低</span>, <span>中</span>, <span>高</span>]} />
);
```

### 文字位置

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => <ScaleBar textareaPosition="top" />;
```

### 高亮颜色

根据当前的数组下标，高亮当前的位置

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => <ScaleBar heightLightColor={'#ef5656'} />;
```

### 高度

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => <ScaleBar height={'24px'} />;
```

### 自定义指标区块颜色

`自定义颜色时候heightColor失效`

```tsx
import React from 'react';
import { ScaleBar } from 'open-library';

export default () => (
  <ScaleBar
    current={2}
    intervalColor={['#F6EF7F', ' #FDC539', '#FA6D35', '#EA2A25']}
  />
);
```

### API

`参数说明`

各类型共用的属性
| 参数 | 说明 | 类型 | 默认值 |
| ---------- | ------------------------------------------------------------ | ----------------------- | -------------------------------- |
| type | quota 指标类型，degree 度量类型，可选： `quota` ,`degree` | string | quota |
| height | 区块高度 | string | number | 12px |
| textarea | 指标文字 | string[] 或 ReactNode[] | ['一般', '正常', '良好', '极佳'] |
| trailColor | 未完成、未高亮分段颜色 | string | - |
| animation | 动画效果,`type=degree`默认开启 | boolea | - |

`type='quota'`
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | --------------------------------------------------------- | -------- | ------ |
| heightLightColor | 当前高亮的指标颜色（自定义颜色数组 intervalColor 时候失效） | string | - |
| current | 当前高亮的指标位置(数组下标) | number | 0 |
| intervalColor | 自定义区块颜色,数组长度和 textarea 长度需相同 | string[] | - |

`type='degree'`
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------ | -------------------------------------- | ------ |
| percent | 百分比 | number | - |
| strokeColor | 进度条线的色彩，传入 object 时为渐变 | string 或 { from: string; to: string } | - |