HIPS-UNI-UI

# Circle 环形进度条

注意

支持圆形进度条和仪表盘两种模式

使用 canvas 绘制进度条

# 使用指南

import Circle from '@hips/uni-ui/lib/circle';

export default {
  components: {
    'hips-circle': Circle,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-circle :percent="20" />
1

# 仪表盘

<hips-circle :percent="20" type="dashboard" />
1

# 修改样式

<!--修改颜色-->
<hips-circle
  :percent="20"
  stroke-color="red"
  stroke-background="#eeeeee"
  fill-color="green"
  padding="8"
/>

<!--修改半径-->
<hips-circle :percent="20" :diameter="150" />

<!--进度条末端形状修改-->
<hips-circle :percent="20" stroke-shape="square" />

<!--修改内部进度数据样式-->
<hips-circle :percent="20" fill-font-color="#1f8ceb" fill-font-size="8" />

<!--修改进度线条宽度-->
<hips-circle :percent="20" :stroke-width="15" />
<hips-circle :percent="20" :back-stroke-width="15" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 自定义中间内容

<hips-circle :percent="percent">
  <span>Been {{ percent+'%' }}</span>
</hips-circle>
1
2
3

# Circle API

参数 说明 类型 默认值
cid canvas id String hipsDefaultCircleCvs
diameter 圆环直径 Number 100
percent 进度数据 0-100 String | Number 0
padding 进度圈在整个容器中的 paddiing 值 String | Number 4
type 类型 circle-进度条/dashboard-仪表盘 String circle
back-stroke-width 背景圈线条宽度 Number 6
stroke-width 进度条圈线条宽度 Number 6
stroke-background 背景圈线条颜色 String #c9c9c9
stroke-color 进度条圈线条颜色 String #1f8ceb
stroke-shape 进度条圈线条两端形状，round-圆形/square-方形 String round
fill-color 圈内整体背景色 String transparent
fill-font-color 圈内文字颜色 String #4A4A4A
fill-font-size 圈内文字字号 String | Number 12

# Circle Slot

名称 说明
- 自定义中间内容

Progress 横向进度条