乐趣区

关于javascript:一个简单的环形进度条组件-vuecircleprogressbar

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 自定义
退出移动版