스태티스틱

스태티스틱 (Statistic)

출처: 문서

본문

통계 수치를 표시하는 컴포넌트예요.

기본 사용법 (Basic Usage)

통계값, 금액, 순위 같은 하나 또는 여러 개의 숫자를 강조할 때, 숫자와 제목 앞뒤에 아이콘이나 단위 같은 요소를 추가할 수 있어요. 그리고 vueuse를 사용해서 값에 애니메이션 전환을 더할 수도 있어요.

import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'

const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1500,
})
source.value = 172000

카운트다운 (Countdown)

카운트다운 컴포넌트로, 다른 컴포넌트를 추가해서 카운트다운을 제어할 수도 있어요.

      {{ value2.format('YYYY-MM-DD') }}

import { ref } from 'vue'
import dayjs from 'dayjs'
import { Calendar } from '@element-plus/icons-vue'

const value = ref(Date.now() + 1000 * 60 * 60 * 7)
const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2)
const value2 = ref(dayjs().add(1, 'month').startOf('month'))

function reset() {
  value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2
}

.countdown-footer {
  margin-top: 8px;
}

TIP 포맷은 일(day) 단위 범위로 지정하는 것을 권장해요.

카드 사용 (Card Usage)

카드 형태로 표시할 수 있어요. 자유롭게 조합할 수 있어요.

import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
} from '@element-plus/icons-vue'

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}

Statistic API

Statistic 속성 (Attributes)

Statistic 슬롯 (Slots)

Statistic Exposes

Countdown API

Countdown 속성 (Attributes)

Countdown 이벤트 (Events)

Countdown 슬롯 (Slots)

Countdown Exposes

더 알아보기 (Learn more)