Statistic 통계 수치

통계 성격의 수치를 설명과 함께 보여 줄 때 사용하는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

설명이 붙은 통계성 데이터를 보여 줘야 할 때 사용해요.

기본 사용법

:::demo

<template>
  <d-row>
    <d-col :span="12">
      <d-statistic title="Users Sales" group-separator="," :value="5201314"> </d-statistic>
    </d-col>
    <d-col :span="12">
      <d-statistic title="Account Weekly Sales (CNY)" group-separator="." :value="999999"> </d-statistic>
    </d-col>
  </d-row>
</template>

:::

숫자 애니메이션

animation 속성을 설정하면 숫자 애니메이션을 켤 수 있어요. 페이지가 로드될 때 애니메이션을 시작할 수도 있고, 직접 제어할 수도 있어요.

:::demo

<template>
  <d-row :gutter="16">
    <d-col :span="12">
      <d-card>
        <d-statistic
          title="Animation Growth Rate"
          :value="88.265"
          suffix="%"
          :value-from="0"
          :start="start"
          :animation-duration="5000"
          animation
        ></d-statistic>
      </d-card>
    </d-col>
    <d-col :span="12">
      <d-card>
        <d-statistic title="Animation Decline Rate" value="53" :precision="3" :value-from="0" :start="controlStart" animation>
          <template #suffix>
            <span>%</span>
            <d-button @click="controlStart = true">Start</d-button>
          </template>
        </d-statistic>
      </d-card>
    </d-col>
  </d-row>
</template>
<script>
export default {
  data() {
    return {
      start: true,
      controlStart: false,
    };
  },
};
</script>

:::

슬롯 사용하기

prefix(접두) 슬롯, suffix(접미) 슬롯, extra(추가) 슬롯이에요.

:::demo

<template>
  <d-row :gutter="16">
    <d-col :span="12">
      <d-statistic :value="336969" class="statistic-demo" group-separator="," animation>
        <template #title>
          <span :style="{ marginRight: '10px' }">文章阅读数</span>
          <d-icon name="help" />
        </template>
        <template #extra>
          <span :style="{ fontSize: '13px', marginRight: '10px' }">较前日</span>
          <d-icon color="#F56C6C" name="arrow-down" />
          <d-statistic group-separator="," class="statistic-extra-demo" value="1399" animation />
        </template>
      </d-statistic>
    </d-col>
    <d-col :span="12">
      <d-statistic :value="5565566" group-separator="," class="statistic-demo" animation :animation-duration="5000">
        <template #title>
          <span :style="{ marginRight: '10px' }">文章点赞数</span>
          <d-icon name="help" />
        </template>
        <template #extra>
          <span :style="{ fontSize: '13px', marginRight: '10px' }">较前日</span>
          <d-icon color="#67C23A" name="arrow-up" />
          <d-statistic class="statistic-extra-demo" value="6669" animation group-separator="," :animation-duration="5000" />
        </template>
      </d-statistic>
    </d-col>
  </d-row>
</template>

<style>
.statistic-demo {
  margin-right: 50px;
}
.statistic-extra-demo {
  display: inline-block;
}
.statistic-demo .devui-statistic__content,
.statistic-extra-demo .devui-statistic__content {
  font-weight: bold;
  font-size: 30px;
}
</style>

:::

카드 안에서 사용하기

카드 안에 통계 수치를 표시해요.

:::demo

<template>
  <d-row :gutter="16">
    <d-col :span="12">
      <d-card>
        <d-statistic :value-style="{ color: '#fba' }" title="Growth Rate" :value="68.28" :precision="3" suffix="%">
          <template #prefix>
            <d-icon name="experice-new" />
          </template>
        </d-statistic>
      </d-card>
    </d-col>
    <d-col :span="12">
      <d-card>
        <d-statistic :value-style="{ color: '#abf' }" title="Decline Rate" :value="38.3" suffix="%">
          <template #prefix>
            <d-icon name="bold" />
          </template>
        </d-statistic>
      </d-card>
    </d-col>
  </d-row>
</template>

:::

Statistic 파라미터

더 알아보기 (Learn more)

animation 속성으로 숫자가 올라가는 애니메이션을 넣고, title·prefix·suffix·extra 슬롯으로 원하는 형태로 꾸밀 수 있어요. 파라미터 자세한 내용은 위 표를 참고하세요.