官网地址：https://github.com/pguso/jquery-plugin-circliful

特性：

• 用圆形来显示信息，没有使用图片
• 基于html5 canvas 和 jquery
• N多选项可设置
• 集成fontawesome

如何使用circliful

引入circliful & jquery

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

其中jquery.circliful.css为如下代码

.circliful {
    position: relative;
}

.circle-text, .circle-info, .circle-text-half, .circle-info-half {
    width: 100%;
    position: absolute;
    text-align: center;
    display: inline-block;
}

.circle-info, .circle-info-half {
	color: #999;
}

.circliful .fa {
	margin: -10px 3px 0 3px;
	position: relative;
	bottom: 4px;
}

在需要展现统计图的位置加入以下html代码：

最后在页面最后加入调用代码

<script>
$( document ).ready(function() {
        $('#myStat').circliful();
    });
</script>

选项设置
Circliful提供了丰富的属性选项设置，基于html5的data属性。

Demo – Download