shape-progress v0.0.5

shape-progress安装使用说明

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

效果展示：

第一步：

 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()