Circle

Display a circular progress chart. Can show task percentage or the proportion of certain data statistics.

Basic Usage

Simply insert content using the default slot.

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>

Dynamic Progress

Can be controlled by external operations.

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>

Set Styles

Configure more custom styles.

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>

DashboardMode

Set the dashboard property to easily achieve a dashboard-style display.

80%

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

Props

Parameter	Description	Type	Options	Default
percent	percentage	Number	—	0
size	Chart width and height, in px	Number	—	120
stroke-linecap	Shape of the progress circle cap	String	square / round	round
stroke-width	Progress circle line width, in px	Number	—	6
stroke-color	Progress circle color	String	—	#2db7f5
trail-width	Progress circle background line width, in px	Number	—	5
trail-color	Progress circle background color	String	—	#eaeef2
dashboard	Whether to display as a dashboard	Boolean	—	false