另一个Vue.js组件可创建优雅的，动画的，基于SVG的圆形进度条。

变更日志：

v1.3.0（09/20/2020）

• 该版本包含有关与IOS和MacOS兼容性的重要修复，并增加了格式化圆圈图例的可能性。

v1.2.0（08/22/2020）

• reverse属性使进度圈逆时针填充
• 进度现在也接受[-100，100]范围内的负值
• 增加了对CDN使用的支持
• 修复和改进

v1.1.1（07/12/2020）

• 此版本用自己的实现替换了count-up.js。该库现在没有依赖项。
• 更好的legendValue小数点处理和作为分隔符

安装和下载：

# NPM
$ npm install vue-ellipse-progress --save

如何使用它：

1.导入并注册vue-ellipse-progress组件。

import VueEllipseProgress from 'vue-ellipse-progress';
Vue.use(VueEllipseProgress);

2.将vue-ellipse-progress添加到应用程序。

<vue-ellipse-progress :progress="progress"/>

3.使用以下props配置圆形进度条。

data: {
  type: Array,
  required: false,
  default: () => [],
},
progress: {
  type: Number,
  require: true,
  validator: (val) => val >= 0 && val <= 100,
},
legendValue: {
  type: Number,
  required: false,
},
size: {
  type: Number,
  required: false,
  default: 200,
  validator: (value) => value >= 0,
},
thickness: {
  type: [Number, String],
  required: false,
  default: "5%",
  validator: (value) => parseFloat(value) >= 0,
},
emptyThickness: {
  type: [Number, String],
  required: false,
  default: "5%",
  validator: (value) => parseFloat(value) >= 0,
},
line: {
  type: String,
  required: false,
  default: "round",
  validator: (value) => ["round", "butt", "square"].includes(value),
},
lineMode: {
  type: String,
  required: false,
  default: "normal",
  validator: (value) => {
    const lineModeConfig = value.split(" ");
    const isValidType = ["normal", "out", "out-over", "in", "in-over", "top", "bottom"].includes(lineModeConfig[0]);
    const isValidOffset = lineModeConfig[1] ? !Number.isNaN(parseFloat(lineModeConfig[1])) : true;
    return isValidType && isValidOffset;
  },
},
color: colorConfig("#3f79ff"),
emptyColor: colorConfig("#e6e9f0"),
colorFill: colorConfig(),
emptyColorFill: colorConfig(),
fontSize: {
  type: String,
  required: false,
},
fontColor: {
  type: String,
  required: false,
},
animation: {
  type: String,
  required: false,
  default: "default 1000 400",
  validator: (value) => {
    const config = value.split(" ");
    const isValidType = ["default", "rs", "loop", "reverse", "bounce"].some((val) => val === config[0]);
    const isValidDuration = config[1] ? parseFloat(config[1]) > 0 : true;
    const isValidDelay = config[2] ? parseFloat(config[2]) > 0 : true;
    return isValidType && isValidDuration && isValidDelay;
  },
},
legend: {
  type: Boolean,
  required: false,
  default: true,
},
legendClass: {
  type: String,
  required: false,
},
angle: {
  type: [String, Number],
  required: false,
  default: -90,
},
loading: {
  type: Boolean,
  required: false,
  default: false,
},
noData: {
  type: Boolean,
  required: false,
  default: false,
},
dash: {
  type: String,
  required: false,
  default: "",
  validator: (value) => {
    if (value.startsWith("strict")) {
      const config = value.split(" ");
      return parseFloat(config[1]) >= 0 && parseFloat(config[2]) >= 0;
    }
    return true;
  },
},
half: {
  type: Boolean,
  required: false,
  default: false,
},
gap: {
  type: Number,
  required: false,
  default: 0,
  validator: (val) => !Number.isNaN(parseInt(val, 10)),
},
determinate: {
  type: Boolean,
  required: false,
  default: false,
},
dot: {
  type: [String, Number, Object],
  required: false,
  default: 0,
  validator: (value) => {
    if (typeof value === "object") {
      if (value.size !== undefined) {
        return !Number.isNaN(parseFloat(value.size));
      }
      return false;
    }
    return !Number.isNaN(parseFloat(value));
  },
},