1.引入js插件progress.js
2.在html中创建canvas、设置宽高、建议为正方形
3.声明
var cvs = new Progress({
el: 'ID值', //canvas元素id
deg: 30, //number、绘制角度、建议0~100
timer: 10, //number、绘制时间
lineWidth: 20, //number、线宽
lineBgColor: '#e2e2e2', //合法的颜色单位,底圆颜色、如:#ccc、rgb()、rgba()
lineColor: '#e4393c', //动态圆颜色
textColor: '#cff', //文本颜色
fontSize: 50, //number字体大小
circleRadius: 100 //number圆半径
});
能加载动态数据吗?
可以的
var p1 = new Progress({
el: 'my_html', //canvas元素id
deg: 30, //填入你的数据 如data
timer: 10, //绘制时间
lineWidth: 20, //线宽
lineBgColor: '#e2e2e2', //底圆颜色
lineColor: '#e4393c', //动态圆颜色
textColor: '#000', //文本颜色
fontSize: 50, //字体大小
circleRadius: 100 //圆半径
});通过获取数据 获取成功之后在调用这段话 把deg改为获取到的动态数据