一个简单的环形进度条组件 vue-circleprogressbar

vue-circleprogressbar

• 一个简单的环形进度条组件

最近在开发可视化大屏项目中经常会用到环形进度条,但是常用的echarts组件对环形进度条的支持不太好,写起来比较麻烦.就想着自己写一个VUE的环形组件,满足自己日常开发需求;

2021/07/26更新内容:

• 闲来无事对组件进行文件压缩,减小引用体积

2019/12/21更新内容:

• 完善bar的宽度逻辑,bar的宽度根据父容器的宽度进行自适应,可自定义widthPresent设置bar占父容器宽-- 度的比例;
• 添加渐变色gradientsColor
• 去掉lodash的依赖,减小组件大小
• 解决bar不随progress变化的bug

vue-circleprogressbar

• 一个简单的环形进度条组件

先上效果图

Installation

$ npm install vue-circleprogressbar

Usage

<template>
    <div class="wrap_01" style="height: 300px;">
        <CircleProgress  
          :id="id"
          :width="300"
          :radius="20"
          :progress="30"
          :isAnimation="true"
        ></CircleProgress>
    </div>
</template>
<script>
import CircleProgress  from 'vur-circleprogressbar';
export default {
  data() {
    return {};
  },
  components: {
    CircleProgress
  }
};
</script>

Optiosn

名字	说明	默认值	类型
widthPresent	设置bar占父容器宽度的比例	1	Number
gradientsColor	bar渐变色设置	[ { offset: "0%", color: "#b2ed9d" },{ offset: "100%", color: "#569b3d" } ]	Array
id	组件的id,用于处理多组件共存	1	Number, String
radius	进度条的厚度	20	Number, String
progress	进度条百分比	20	Number, String
barColor	进度条颜色	'#1890ff'	String
backgroundColor	进度条环形背景色	rgba(0,0,0,0.3)	String
isAnimation	是否显示动画	true	Bollean
isRound	是否使用圆形画笔	true	Bollean
duration	动画时长	1000	Number, String
delay	动画延迟时间	200	Number, String
timeFunction	动画缓动函数	'cubic-bezier(0.99, 0.01, 0.22, 0.94)'	String

slot

名字	说明	默认值	类型
默认插槽	环形进度条中间的title自定义	–	–