BizRankList 排行榜

TOP N 排行榜：按 value 降序排列，前三名金 / 银 / 铜渐变徽章，占比进度条（相对最大值，带过渡动画）、top 截取、value-formatter 数值格式化（默认千分位）、extra 副文案、item-click 下钻、bar / list 双布局。数据看板 / 大屏销售排行、异常告警排行——与 BizStatisticGroup、BizChart 配套组合看板。

基础用法

1

华北大区北京

1,520,500

2

华东大区上海

1,263,000

3

华南大区深圳

987,200

4

西南大区成都

643,800

5

东北大区沈阳

421,600

top=5 截取前五（数据 6 条自动截断），前三名金银铜徽章 + 占比进度条。

<script setup lang="ts">
/** 场景：销售排行——top5 降序 + 前三金银铜徽章 + 占比进度条 */
import { BizRankList } from 'vue3-ep-biz-lib'
import type { BizRankItem } from 'vue3-ep-biz-lib'

const data: BizRankItem[] = [
  { label: '华东大区', value: 1263000, extra: '上海' },
  { label: '华南大区', value: 987200, extra: '深圳' },
  { label: '华北大区', value: 1520500, extra: '北京' },
  { label: '西南大区', value: 643800, extra: '成都' },
  { label: '东北大区', value: 421600, extra: '沈阳' },
  { label: '西北大区', value: 305200, extra: '西安' },
]
</script>

<template>
  <div style="max-width: 420px">
    <BizRankList :data="data" :top="5" />
  </div>
</template>

显示代码

数值格式化

1

蓝牙耳机 Pro

3.21 万

2

智能手环 6

2.85 万

3

便携音箱 mini

1.96 万

4

无线充电器

1.23 万

默认千分位格式（上一示例），本示例经 valueFormatter 转万元单位

value-formatter 转万元单位；value-width 数值列宽。

<script setup lang="ts">
/** 场景：数值格式化——valueFormatter 转万元 + valueWidth 数值列宽 */
import { BizRankList } from 'vue3-ep-biz-lib'
import type { BizRankItem } from 'vue3-ep-biz-lib'

const data: BizRankItem[] = [
  { label: '蓝牙耳机 Pro', value: 32150 },
  { label: '智能手环 6', value: 28470 },
  { label: '便携音箱 mini', value: 19630 },
  { label: '无线充电器', value: 12320 },
]

const toWan = (value: number): string => `${(value / 10000).toFixed(2)} 万`
</script>

<template>
  <div style="max-width: 420px">
    <BizRankList :data="data" :value-formatter="toWan" :value-width="88" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      默认千分位格式（上一示例），本示例经 valueFormatter 转万元单位
    </p>
  </div>
</template>

显示代码

紧凑列表

今日异常排行

1

SQL 慢查询告警

128

2

接口超时

96

3

磁盘占用超阈

64

4

证书临期

21

5

服务重启

9

layout="list" 无进度条紧凑形态（嵌入卡片 / 弹窗），top=0 显示全部。

<script setup lang="ts">
/** 场景：紧凑列表——layout=list 无进度条形态（嵌入卡片 / 弹窗） */
import { BizRankList } from 'vue3-ep-biz-lib'
import type { BizRankItem } from 'vue3-ep-biz-lib'

const data: BizRankItem[] = [
  { label: 'SQL 慢查询告警', value: 128 },
  { label: '接口超时', value: 96 },
  { label: '磁盘占用超阈', value: 64 },
  { label: '证书临期', value: 21 },
  { label: '服务重启', value: 9 },
]
</script>

<template>
  <div style="max-width: 360px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 12px">
    <div style="font-size: 13px; font-weight: 600; margin-bottom: 10px">今日异常排行</div>
    <BizRankList :data="data" layout="list" :show-percent="false" :top="0" />
  </div>
</template>

显示代码

下钻交互

1

华东大区同比 +18%

1,520,500

2

华南大区同比 +9%

1,263,000

3

华北大区同比 -3%

987,200

4

西南大区同比 +22%

643,800

点击条目查看大区明细

item-click 打开大区明细弹窗（排行条目可点击）。

<script setup lang="ts">
/** 场景：下钻交互——item-click 打开明细（排行条目可点击） */
import { ref } from 'vue'
import { ElDialog, ElDescriptions, ElDescriptionsItem } from 'element-plus'
import { BizRankList } from 'vue3-ep-biz-lib'
import type { BizRankItem } from 'vue3-ep-biz-lib'

const data: BizRankItem[] = [
  { label: '华东大区', value: 1520500, extra: '同比 +18%' },
  { label: '华南大区', value: 1263000, extra: '同比 +9%' },
  { label: '华北大区', value: 987200, extra: '同比 -3%' },
  { label: '西南大区', value: 643800, extra: '同比 +22%' },
]

const detail = ref<BizRankItem | null>(null)
</script>

<template>
  <div style="max-width: 420px">
    <BizRankList :data="data" @item-click="(item) => (detail = item)" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">点击条目查看大区明细</p>

    <ElDialog :model-value="detail !== null" :title="`${detail?.label ?? ''} 明细`" width="380px" @update:model-value="detail = null">
      <ElDescriptions :column="1" border size="small">
        <ElDescriptionsItem label="销售额">¥{{ (detail?.value ?? 0).toLocaleString('zh-CN') }}</ElDescriptionsItem>
        <ElDescriptionsItem label="趋势">{{ detail?.extra }}</ElDescriptionsItem>
        <ElDescriptionsItem label="排名">{{ detail ? data.findIndex((d) => d.label === detail?.label) + 1 : '-' }} / {{ data.length }}</ElDescriptionsItem>
      </ElDescriptions>
    </ElDialog>
  </div>
</template>

显示代码

实时竞榜

1

苏州

88,483

2

杭州

87,541

3

长沙

82,427

4

郑州

62,263

5

武汉

55,576

6

南京

36,421

定时刷新数据，名次变化进度条动画过渡（0.4s ease）。

<script setup lang="ts">
/** 场景：实时榜单——定时刷新数据模拟实时竞榜（名次变化进度条动画过渡） */
import { onBeforeUnmount, ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizRankList } from 'vue3-ep-biz-lib'
import type { BizRankItem } from 'vue3-ep-biz-lib'

const cities = ['杭州', '苏州', '武汉', '南京', '长沙', '郑州']
const data = ref<BizRankItem[]>(
  cities.map((label) => ({ label, value: Math.round(Math.random() * 80000 + 20000) }))
)

let timer: ReturnType<typeof setInterval> | null = null
const live = ref(false)

const toggleLive = (): void => {
  live.value = !live.value
  if (live.value) {
    timer = setInterval(() => {
      data.value = data.value.map((item) => ({
        ...item,
        value: Math.max(5000, item.value + Math.round((Math.random() - 0.45) * 9000)),
      }))
    }, 1200)
  } else if (timer) {
    clearInterval(timer)
    timer = null
  }
}

onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
})
</script>

<template>
  <div style="max-width: 420px">
    <BizRankList :data="data" :top="6" />
    <ElButton size="small" style="margin-top: 12px" :type="live ? 'danger' : 'primary'" @click="toggleLive">
      {{ live ? '停止实时竞榜' : '开启实时竞榜' }}
    </ElButton>
  </div>
</template>

显示代码

看板组合

渠道销售排行

1

旗舰店天猫

86,500

2

专营店京东

62,100

3

直营店抖音

45,300

4

分销渠道线下

28,700

单品销量 TOP3

1

经典礼盒装

12,300

2

单瓶尝鲜装

9,800

3

家庭囤货装

7,400

排行卡与统计卡组合的数据看板场景（bar + list 混排）。

<script setup lang="ts">
/** 场景：暗色看板嵌入——排行卡与统计卡组合（数据看板场景） */
import { ElCard } from 'element-plus'
import { BizRankList } from 'vue3-ep-biz-lib'
import type { BizRankItem } from 'vue3-ep-biz-lib'

const branches: BizRankItem[] = [
  { label: '旗舰店', value: 86500, extra: '天猫' },
  { label: '专营店', value: 62100, extra: '京东' },
  { label: '直营店', value: 45300, extra: '抖音' },
  { label: '分销渠道', value: 28700, extra: '线下' },
]

const sku: BizRankItem[] = [
  { label: '经典礼盒装', value: 12300 },
  { label: '单瓶尝鲜装', value: 9800 },
  { label: '家庭囤货装', value: 7400 },
]
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; max-width: 720px">
    <ElCard shadow="never">
      <template #header>
        <span style="font-size: 13px; font-weight: 600">渠道销售排行</span>
      </template>
      <BizRankList :data="branches" :top="4" />
    </ElCard>
    <ElCard shadow="never">
      <template #header>
        <span style="font-size: 13px; font-weight: 600">单品销量 TOP3</span>
      </template>
      <BizRankList :data="sku" :top="3" layout="list" :show-percent="false" />
    </ElCard>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
data	BizRankItem[]	[]	榜单数据（组件内按 value 降序排列）
top	number	5	只显示前 N 名（0 = 全部）
value-formatter	(value: number) => string	千分位	数值格式化
show-percent	boolean	true	显示占比进度条（bar 布局）
value-width	number	72	数值列宽（px）
layout	'bar' | 'list'	'bar'	布局：条形进度 / 紧凑列表

Events

事件名	参数	说明
item-click	(item, index)	点击排行条目（下钻明细）

TIP

组件不关心数据来源：实时榜单由业务定时拉取后更新 data，进度条自动过渡；如需轮播翻页形态可配合 BizSeamlessScroll 使用。