DataStatistic 统计数值卡片

使用 avue-data-statistic 展示统计数值卡片，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

正负 trend 分别展示上升和下降，value 与 prefix/suffix 组合成指标。

正在加载示例…

<template>
  <div>
    <h3>基础用法</h3>
    <avue-data-statistic :option="option1"></avue-data-statistic>
    <h3 style="margin-top: 20px;">带趋势指标</h3>
    <avue-data-statistic :option="option2"></avue-data-statistic>
    <h3 style="margin-top: 20px;">自定义样式</h3>
    <avue-data-statistic :option="option3"></avue-data-statistic>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const option1 = ref({
  span: 6,
  data: [
    { title: '总用户', value: 8846 },
    { title: '今日订单', value: 156 },
    { title: '本月收入', value: 98500, prefix: '¥' },
    { title: '在线人数', value: 234 }
  ]
});
const option2 = ref({
  span: 6,
  data: [
    { title: '销售额', value: 128000, prefix: '¥', trend: 12.5, trendText: 'vs 昨日' },
    { title: '订单数', value: 1256, trend: -5.2, trendText: 'vs 昨日' },
    { title: '用户数', value: 8846, trend: 8.1, trendText: 'vs 昨日' },
    { title: '访问量', value: 128560, trend: 15.3, trendText: 'vs 昨日' }
  ]
});
const option3 = ref({
  span: 6,
  data: [
    { title: '总收入', value: 256800, prefix: '¥', suffix: '元', valueColor: '#67c23a' },
    { title: '完成率', value: 98.5, suffix: '%', decimals: 1, valueColor: '#409eff' },
    { title: '待处理', value: 23, valueColor: '#e6a23c' },
    { title: '异常数', value: 5, valueColor: '#f56c6c' }
  ]
});
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	6	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量
gutter	number	20	栅格间距，单位 px；当前实现传 0 也会回退为 20

data 数据项

字段	类型	默认值	说明
title	string	—	指标名称
value	number	—	指标数值
prefix / suffix	string	—	数值前缀与后缀
decimals	number	0	小数位数
animation	boolean	true	是否启用数字动画
valueColor	string	—	数值文字颜色
icon / iconColor / iconSize	string / string / number	— / #409eff / 40	图标、颜色和尺寸（px）
trend / trendText	number / string	—	变化百分比与补充文本；正数向上，负数向下，0 也显示
backgroundColor / borderColor	string	#fff / #ebeef5	卡片背景及边框颜色
click	function	—	点击回调 click(item)

使用说明

此组件的数值键是 value，不是旧指标组件的 count；animation/decimals 配在每个数据项上。

span 使用 Element Plus 的 24 栅格体系。布局随屏幕宽度切换，不要把它当成像素宽度；给数字字段传原始数值，单位使用对应的文本字段。

事件与回调

组件没有通过 $emit 定义业务事件。data[i].click(item) 是配置回调，接收原始数据项；它不是组件 @click 的数据事件。这些卡片不处理 href，跳转逻辑应写在 click 回调中。

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。