# shape-progress

> a easy shape progress!

Latest version **0.0.5** (published 2022-04-07) · 0 weekly downloads

## Install

```sh
npm install shape-progress
pnpm add shape-progress
yarn add shape-progress
bun add shape-progress
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-04-07 |
| First published | 2022-04-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 54.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 朱冯博 |
| Maintainers | zfbandvue |
| Keywords | shape-progress |

## Links

- npm: https://www.npmjs.com/package/shape-progress
- npm.io page: https://npm.io/package/shape-progress

## Dependencies (1)

- [strip-ansi](https://npm.io/package/strip-ansi.md) ^7.0.1

## Recent versions

- 0.0.5 (latest) — 2022-04-07
- 0.0.4 — 2022-04-07
- 0.0.3 — 2022-04-06
- 0.0.2 — 2022-04-06
- 0.0.1 — 2022-04-06

## README

## shape-progress安装使用说明

**shape-progress 支持进度模式和报表模式**

**效果展示：**

![shape](http://uyi2.com:8000/pic/shape.png)

第一步： 

```
 npm install shape-progress
```

第二步:


```
import ShapeProgress from 'shape-progress';
```

API使用案例:


1.实例化一个多边形进度条
```
var shapeProgress = new ShapeProgress();
```
2.界面上创建一个id=shape-progress的容器节点来挂载对应的多边形进度条

```
<div id="shape-progress" style={{marginLeft: "40%", marginTop:"10%"}}></div>
```


3.创建一个高为300，宽为300的画布并挂载至以上容器节点上 
```
shapeProgress.createCanvas({
	root: "shape-progress",
	width: 300,
	height: 300,
})
```
4.设置中心点icon图片

```
import progressIcon from './images/progress-icon.ico'//为本地icon存放路径 
shapeProgress.setIcon({
	iconUrl: progressIcon,
	iconWidth: 40,
	iconHeight: 40
});
```

5.绘制一个多边形

```
 shapeProgress.paint({
	 side: 6, //边长为6变形
	 sideWidth: 1,//边长宽度
	 bkColor: "#ddd",//边长颜色
	 raduis: 60//以60为半径的多边形
 });
 
 shapeProgress.paint({
        side: 6,//边长为6变形
        sideWidth: 16,//边长宽度
        bkColor: "#ff6600",//边长颜色
        raduis: 100,//以100为半径的多边形
		fillColor: "#ccc"//多边形内部填充色
  });
 这样一来就绘制出了两个嵌套的多边形  
```

6.设置hover提示框的样式 

```
shapeProgress.setTipsStyle({
	opacity: 1,//透明度
	backgroundColor:"#ccc",//背景色
	fontColor: "#000",//文字颜色
	maxWidth: 400,//最大宽度
})
```
7.设置报表模式调用方式

```
shapeProgress.setProgress([{
		name: "<b style='color: #d27f2a'>电子产业</b>", //报表项名称   
		value: 20,//占比20%
		progressStyle: {
			color: "green",//进度条颜色
		}
}, 
	{
		name: "<b style='color: #d27f2a'>军工产业</b>",    
		value: 40,
		progressStyle: {
			color: "red",//进度条颜色
	}
}, 
	{
		name: "<b style='color: #d27f2a'>重工业基地</b>",    
		value: 40,
		progressStyle: {
		color: "#010100",//进度条颜色
	}
}]);

```
8.进度模式设置，可以通过以下api设置进度条步长

```
shapeProgress.setProgress({
	progress: 10,//10%进度设置
	progressStyle: {
		color: "red",//进度条颜色
	}
});

shapeProgress.setProgress({
	progress: 50,//50%进度设置
	progressStyle: {
		color: "green",//进度条颜色
	}
});
```
9.清除进度，一般用于reset

```
shapeProgress.clearProgress(); //清除进度条，一般用于reset
```

10.设置hover提示框的显示格式可以使用占位符 name: 报表中设置的name， value：报表中设置的占比  

```
shapeProgress.showTips('{name}:{value}%', ',', function(result) {
        
});

```
11.隐藏hover提示框

```
shapeProgress.hideTips();
```

12.显示画布

```
shapeProgress.show()
```
13.隐藏画布

```
shapeProgress.hide()
```
14.移除画布
```
shapeProgress.remove()
```

---
_Source: https://npm.io/package/shape-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._