进度环 Circle

显示环形图，可以显示任务百分比或者是统计某些数据的占比情况

基础用法

直接用组件默认插槽插入即可

80%

<template>
  <div flex="main:justify" style="width: 400px">
    <b-circle :percent="80">
      <span class="demo-circle-inner" style="font-size: 24px">80%</span>
    </b-circle>
    <b-circle :percent="100" stroke-color="#5cb85c">
      <b-icon name="check" size="30" style="color: #5cb85c"></b-icon>
    </b-circle>
    <b-circle :percent="35" stroke-color="#ff5500">
      <span class="demo-circle-inner">
        <b-icon name="close" size="30" style="color: #ff5500"></b-icon>
      </span>
    </b-circle>
  </div>
</template>

<template>
  <div flex="main:justify" style="width: 400px">
    <b-circle :percent="80">
      <span class="demo-circle-inner" style="font-size: 24px">80%</span>
    </b-circle>
    <b-circle :percent="100" stroke-color="#5cb85c">
      <b-icon name="check" size="30" style="color: #5cb85c"></b-icon>
    </b-circle>
    <b-circle :percent="35" stroke-color="#ff5500">
      <span class="demo-circle-inner">
        <b-icon name="close" size="30" style="color: #ff5500"></b-icon>
      </span>
    </b-circle>
  </div>
</template>

动态进度

可以配合外部操作进度

10%

<template>
  <div flex="main:justify" style="width: 300px">
    <b-circle :percent="percent" :stroke-color="color">
      <b-icon v-if="percent === 100" name="check" size="50" style="color: #5cb85c"></b-icon>
      <span v-else style="font-size: 24px">{{ percent }}%</span>
    </b-circle>

    <b-button-group>
      <b-button icon="minus" @click="minus"></b-button>
      <b-button icon="plus" @click="add"></b-button>
    </b-button-group>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
const percent = ref(10)

const color = computed(() => {
  let color = '#2db7f5'
  if (percent.value === 100) {
    color = '#5cb85c'
  }
  return color
})

function add() {
  percent.value += 10
  if (percent.value >= 100) percent.value = 100
}

function minus() {
  percent.value -= 10
  if (percent.value < 0) percent.value = 0
}
</script>

<template>
  <div flex="main:justify" style="width: 300px">
    <b-circle :percent="percent" :stroke-color="color">
      <b-icon v-if="percent === 100" name="check" size="50" style="color: #5cb85c"></b-icon>
      <span v-else style="font-size: 24px">{{ percent }}%</span>
    </b-circle>

    <b-button-group>
      <b-button icon="minus" @click="minus"></b-button>
      <b-button icon="plus" @click="add"></b-button>
    </b-button-group>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
const percent = ref(10)

const color = computed(() => {
  let color = '#2db7f5'
  if (percent.value === 100) {
    color = '#5cb85c'
  }
  return color
})

function add() {
  percent.value += 10
  if (percent.value >= 100) percent.value = 100
}

function minus() {
  percent.value -= 10
  if (percent.value < 0) percent.value = 0
}
</script>

设置样式

可以配置更多的自定义样式

42,001,776

消费人群规模

总占人数 75%

<template>
  <b-circle
    :size="250"
    :trail-width="4"
    :stroke-width="5"
    :percent="75"
    stroke-linecap="square"
    stroke-color="#43a3fb"
  >
    <div class="demo-Circle-custom">
      <h1>42,001,776</h1>
      <p>消费人群规模</p>
      <span>
        总占人数
        <i>75%</i>
      </span>
    </div>
  </b-circle>
</template>

<template>
  <b-circle
    :size="250"
    :trail-width="4"
    :stroke-width="5"
    :percent="75"
    stroke-linecap="square"
    stroke-color="#43a3fb"
  >
    <div class="demo-Circle-custom">
      <h1>42,001,776</h1>
      <p>消费人群规模</p>
      <span>
        总占人数
        <i>75%</i>
      </span>
    </div>
  </b-circle>
</template>

仪表盘模式

通过设置属性 dashboard，可以很方便地实现仪表盘样式。

80%

<template>
  <b-circle :percent="80" dashboard>
    <span class="demo-circle-inner" style="font-size: 24px">80%</span>
  </b-circle>
</template>

<template>
  <b-circle :percent="80" dashboard>
    <span class="demo-circle-inner" style="font-size: 24px">80%</span>
  </b-circle>
</template>

Props

参数	说明	类型	可选值	默认值
percent	百分比	Number	—	0
size	图表的宽度和高度，单位 px	Number	—	120
stroke-linecap	进度环顶端的形状	String	square（方）/round（圆）	round
stroke-width	进度环的线宽，单位 px	Number	—	6
stroke-color	进度环的颜色	String	—	#2db7f5
trail-width	进度环背景的线宽，单位 px	Number	—	5
trail-color	进度环背景的颜色	String	—	#eaeef2
dashboard	是否显示为仪表盘	Boolean	—	false

进度环 Circle ​

基础用法 ​

动态进度 ​

设置样式 ​

42,001,776

仪表盘模式 ​

Props ​

进度环 Circle

基础用法

动态进度

设置样式

仪表盘模式

Props