小程序圆形进度条代码包

// miniprogram/pages/record/record.js const util = require('../util/util.js') const app = getApp() Page({ /** * 页面的初始数据 */ data: { nianji:'二年级下', today_date:'', circle_progress_props:[ { canvasId:'0', backStrokeColor:'#D7F9FA', strokeColor:'#00DADF', // width:133, // height:133, // leftMargin:150, // topMargin:100, x:110, y:104, radius:30, percent:60, text:'60%', fontSize:36, fontColor:'#FF7042' }, { canvasId: '1', backStrokeColor: '#FFEAE4', strokeColor: '#FF7954', // width: 113, // height: 113, // leftMargin: 215, // topMargin: -100, x: 60, y: 50, radius: 25, percent: 60, text: '60%', fontSize: 30, fontColor: '#FF7954' }, { canvasId: '2', backStrokeColor: '#FFF7E0', strokeColor: '#FFCB2E', // width: 133, // height: 133, // leftMargin: 150, // topMargin: 100, x: 60, y: 50, radius: 25, percent: 60, text: '60%', fontSize: 30, fontColor: '#FFCB2E' }, { canvasId: '3', backStrokeColor: '#E6FBEA', strokeColor: '#58E273', // width: 133, // height: 133, // leftMargin: 150, // topMargin: 100, x: 60, y: 50, radius: 25, percent: 60, text: '60%', fontSize: 30, fontColor: '#58E273' }, { canvasId: '4', backStrokeColor: '#E9F8FF', strokeColor: '#6CCCFF', // width: 133, // height: 133, // leftMargin: 150, // topMargin: 100, x: 60, y: 50, radius: 25, percent: 60, text: '60%', fontSize: 30, fontColor: '#6CCCFF' }, { canvasId: '5', backStrokeColor: '#F8F0FF', strokeColor: '#D7A8FE', // width: 133, // height: 133, // leftMargin: 150, // topMargin: 100, x: 60, y: 50, radius: 25, percent: 60, text: '60%', fontSize: 30, fontColor: '#D7A8FE' }, { canvasId: '6', backStrokeColor: '#FEF5F0', strokeColor: '#FF7699', // width: 133, // height: 133, // leftMargin: 150, // topMargin: 100, x: 60, y: 50, radius: 25, percent: 60, text: '60%', fontSize: 30, fontColor: '#FF7699' } ], today_total_topics_count:0,//今日练习总题数 today_exercise_total_times:0,//今日练习总次数 total_use_phone_time_count:'0',//今日玩手机总时长 today_play_app_progress_data:[ { appName:'应用名', percent:60, useMins:0 }, { appName: '应用名', percent: 60, useMins: 0 }, { appName: '应用名', percent: 60, useMins: 0 } ], exercises_tongji_data:[ { tagPath: '../../images/ic_sync_ex_tag.png', exerciseTimeCount:0, exerciseTopicsCount:0 }, { tagPath: '../../images/ic_sw_ex_tag.png', exerciseTimeCount: 0, exerciseTopicsCount: 0 }, { tagPath: '../../images/ic_speaking_ex_tag.png', exerciseTimeCount: 0, exerciseTopicsCount: 0 }, { tagPath: '../../images/ic_ew_ex_tag.png', exerciseTimeCount: 0, exerciseTopicsCount: 0 }, { tagPath: '../../images/ic_hearing_ex_tag.png', exerciseTimeCount: 0, exerciseTopicsCount: 0 }, { tagPath: '../../images/ic_oc_ex_tag.png', exerciseTimeCount: 0, exerciseTopicsCount: 0 } ] }, getData:function(){ var that = this; wx.request({ url: app.globalData.BASE_URL + app.globalData.RECORD_ITEM, data:{ child_id:844 }, method: 'POST', success:function(res){ that.setData({ today_total_topics_count: res.data.data.record.today_exercises_num, today_exercise_total_times: res.data.data.record.today_answer_num, total_use_phone_time_count: res.data.data.record.today_play_time, exercises_tongji_data:[ { tagPath: '../../images/ic_sync_ex_tag.png', exerciseTimeCount: res.data.data.tblx.answer_num, exerciseTopicsCount: res.data.data.tblx.exercise_num }, { tagPath: '../../images/ic_sw_ex_tag.png', exerciseTimeCount: res.data.data.szlx.answer_num, exerciseTopicsCount: res.data.data.szlx.exercise_num }, { tagPath: '../../images/ic_speaking_ex_tag.png', exerciseTimeCount: res.data.data.kylx.answer_num, exerciseTopicsCount: res.data.data.kylx.exercise_num }, { tagPath: '../../images/ic_ew_ex_tag.png', exerciseTimeCount: res.data.data.dclx.answer_num, exerciseTopicsCount: res.data.data.dclx.exercise_num }, { tagPath: '../../images/ic_hearing_ex_tag.png', exerciseTimeCount: res.data.data.tllx.answer_num, exerciseTopicsCount: res.data.data.tllx.exercise_num }, { tagPath: '../../images/ic_oc_ex_tag.png', exerciseTimeCount: res.data.data.kslx.answer_num, exerciseTopicsCount: res.data.data.kslx.exercise_num } ] }) var props = that.data.circle_progress_props; if (that.data.today_total_topics_count == 0){ props[0].percent = 0; props[0].text = '0%'; }else{ props[0].percent = (res.data.data.record.today_right_num / that.data.today_total_topics_count)*100; props[0].text = props[0].percent+'%'; } props[1].percent = Math.ceil((res.data.data.tblx.right_num / res.data.data.tblx.exercise_num) * 100); props[1].text = props[1].percent + '%'; props[2].percent = Math.ceil((res.data.data.szlx.right_num / res.data.data.szlx.exercise_num) * 100); props[2].text = props[2].percent + '%'; props[3].percent = Math.ceil((res.data.data.kylx.right_num / res.data.data.kylx.exercise_num) * 100); props[3].text = props[3].percent + '%'; props[4].percent = Math.ceil((res.data.data.dclx.right_num / res.data.data.dclx.exercise_num) * 100); props[4].text = props[4].percent + '%'; props[5].percent = Math.ceil((res.data.data.tllx.right_num / res.data.data.tllx.exercise_num) * 100); props[5].text = props[5].percent + '%'; props[6].percent = Math.ceil((res.data.data.kslx.right_num / res.data.data.kslx.exercise_num) * 100); props[6].text = props[6].percent + '%'; that.setData({ circle_progress_props:props }) that.drawRoundProgress(); } }) }, drawRoundProgress:function(){ var that = this; var props = new Array(); props = that.data.circle_progress_props; for (var i = 0; i < props.length; i++) { var item = props[i]; util.drawCircleProgress(item.canvasId, item.backStrokeColor, item.strokeColor, /*item.width, item.height, item.leftMargin,item.topMargin,*/item.x, item.y, item.radius, item.percent, item.text, item.fontSize, item.fontColor); } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; var date = new Date(); that.setData({ today_date: date.getFullYear()+'-'+date.getMonth()+'-'+date.getDay() }) that.getData();