# @upday/upcircle

> 以环形方式展示进度完成情况

Latest version **1.1.1** (published 2020-05-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install @upday/upcircle
pnpm add @upday/upcircle
yarn add @upday/upcircle
bun add @upday/upcircle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-05-14 |
| First published | 2020-05-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tianyige |
| Maintainers | tianyige21 |
| Keywords | vue, circle, 环形进度条 |

## Links

- npm: https://www.npmjs.com/package/@upday/upcircle
- npm.io page: https://npm.io/package/@upday/upcircle

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2020-05-14
- 1.1.0 — 2020-05-14
- 1.0.9 — 2020-05-13

## README

# upCircle 环形进度条

以环形方式展示进度完成情况

## 使用方法

安装@upday/upcircle

```html

npm i @upday/upcircle

```

在文件中引入@upday/upcircle
```html

import upCircle from '@upday/upcircle';

```


## 基础用法
<img src="https://img13.360buyimg.com/imagetools/jfs/t1/100017/30/3500/3334/5de08759E7eaacc3b/7bbea5808575b3a1.png" >

```html
<up-circle :percent="30"  strokeColor="#3cbd3c" :radius="50" :strokeWidth="12" :trailWidth="10"></up-circle>
```

### 显示文案

文案样式可自定义


```html
<up-circle :percent="50" >
    <span style="font-size:24px">50%</span>
</up-circle>

```

### 渐变颜色

```html
<up-circle :percent="80"    strokeColor="['#e52c5c','#ab5aea']" >
    <span style="font-size:24px">80%</span>
</up-circle>
```

### 进度动画

```html
<up-circle :percent="100"  strokeColor="#3cbd3c" :radius="50" :strokeWidth="12" :trailWidth="10" :duration="1000" @progress="changeShow">
    <span style="font-size:24px">{{show}}%</span>
</up-circle>
<script>
export default {
    data(){
        return{
            show:0
        }
    },
    methods:{
        changeShow(rate) {
            this.show = Math.ceil(rate);
        }
    }
}
</script>
```

## Prop

| 字段 | 说明 | 类型 | 默认值
| ----- | ----- | ----- | -----
| percent | 进度条位置百分比（0-100） | Number | 0 
| strokeWidth | 高亮的进度线宽度（单位px） | Number | 6
| strokeColor | 高亮的进度线颜色 | String/Array | #8e71c7
| strokeLinecap | 环形路径两端的形状（可选值：butt/round/square） | String | round
| radius | 圆形的半径（单位px） | Number | 100
| trailWidth | 环形线的宽度（单位px） | Number | 6
| trailColor | 环形线的底色 | String | #ddd
| duration | 进度动画持续时长 | Number | 0


## 相关命令

```
npm publish --access public
```


```
 npm unpublish  xxxx  --force   
```

###  关于作者
微信：qq805599

<img src="https://gitee.com/tianyige21/image_icon/raw/master/WechatIMG6.jpeg" style="width:200px">

---
_Source: https://npm.io/package/@upday/upcircle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._