Mp-awesome-progress NPM

mp-awesome-progress

基于微信小程序和canvas的环形进度条组件，支持npm引入方式，支持和很多自定义的属性和动画效果，效果图如下

环形进度条效果图

其他效果案例

支持进度控制

安装和使用

npm引入

安装

npm install --save mp-awesome-progress

使用

npm构建后使用

import MpAwesomeProgress from "mp-awesome-progress"

const inst = new MpAwesomeProgress({
  canvasId: "myCanvas",
  cssSize: {
    width: 104,
    height: 104,
  },
  textNodes: [
    {
      color: "#999999",
      fontSize: 10,
      textContent: "本次考试得分",
      top: 61,
    },
  ],
  onReady: () => {
    // 自主控制绘制时机
    inst.draw();
    // 模拟获取到数据后再更新分数
    setTimeout(() => {
        inst.setTextNodes([
          {
            color: "#FF683F",
            fontWeight: "bold",
            fontSize: 18,
            format: (percentage) => {
              return percentage.toFixed(2);
            },
            top: 37,
          },
          {
            color: "#999999",
            fontSize: 10,
            textContent: "本次考试得分",
            top: 61,
          },
          {
            color: "#FF683F",
            fontSize: 14,
            textContent: "不合格",
            top: 81,
          },
      ]);
      inst.setPercentage({
        value: 90,
        duration: 0.6,
      });
    }, 3000);
  },
});

支持的组件属性

参数	说明	类型	是否必传	默认值
percentage	百分比	Number	false	0
start-deg	开始角度	Number	false	270
circle-radius	圆环的半径	Number	false	40
circle-width	圆环的线宽	Number	false	2
circle-color	圆环的颜色	String	false	#e5e5e5
line-width	进度弧线的宽度	Number	false	8
use-gradient	是否使用渐变色绘制进度弧线	Boolean	false	false
line-color-stops	进度弧线渐变色断点	Array	false	{"percent":0,"color":"#13CDE3"},{"percent":1,"color":"#3B77E3"}
line-color	进度弧线颜色	String	false	#3B77E3
show-text	是否显示环内文字	Boolean	false	true
font-size	环内字体大小	Number	false	14
font-color	环内字体颜色	String	false	#444
format	文字格式化方法	Function	false
point-radius	圆点半径，值<=0则不显示圆点	Number	false	6
point-color	圆点填充色	String	false	#3B77E3
animated	是否使用动画效果	Boolean	false	true
easing	贝塞尔缓动函数，默认是ease-in效果	String	false	0.42,0,1,1
duration	初始动画周期，单位为秒	Number	false	1