circliful 圆形图表插件
github https://github.com/pguso/jquery-plugin-circliful
首先需要引入jQuery.js 和 circliful.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.circliful.js"></script>
css 我没有引
<link rel="stylesheet" href="css/jquery.circliful.css">
这个插件是可以引入icon的，我没有引入，因为没有需求
<link rel="stylesheet" href="css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="test-circle"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.circliful.js"></script>
<script>
$("#test-circle").circliful({
animation: 1,//
animationStep: 5,// 可以是1到100，动画应该多快或多慢
animateInView: true,// 滚动到视图中的动画圆圈
percent: 38,// 百分比
percentageTextSize: 28,//百分比大小
fontColor:'#000',//百分比颜色
// text:123,//文字 在百分比下边
textSize: 28,// 文字大小
textStyle: 'font-size: 12px;',//
textColor: '#666',//文字颜色
foregroundBorderWidth: 12,//前景圈的宽度
backgroundBorderWidth: 8,//背景圈的宽度
foregroundColor:'#000',//前景圈的颜色
backgroundColor:"#e5e5e5",//背景圈的颜色
// replacePercentageByText:123,//123 string 代替百分比
});
</script>
</body>
</html>
如果引入插件不起作用，animateInView: true 把这个干掉试试，我这边是的原因是因为这个，因为我的打开不是当前视口。