xtf-statistic

组件说明

xtf-statistic 是指标数字展示组件，适用于仪表盘、经营数据和趋势概览。支持千分位、精度、自定义格式化、数值过渡和加载占位。

基础用法

1. 基础指标

<template><xtf-statistic label="订单数" :value="1280" /></template>
<script>
export default {}
</script>

2. 金额与趋势

<template>
  <xtf-statistic
    label="成交额"
    :value="amount"
    prefix="¥"
    :precision="2"
    suffix="元"
    trend="up"
    note="较昨日增长"
  />
</template>
<script>
export default {
  data() {
    return { amount: 12896.5 }
  }
}
</script>

3. 格式化和动画

<template>
  <view>
    <xtf-statistic
      label="完成率"
      :value="rate"
      suffix="%"
      :format="format"
      :duration="600" /><xtf-button label="刷新" @click="rate = 96.8"
  /></view>
</template>
<script>
export default {
  data() {
    return { rate: 72.3 }
  },
  methods: {
    format(value) {
      console.log('格式化', value)
      return value.toFixed(1)
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | value | String \| Number | 0 | 指标值 | 核心数据 | | label/note | String | '' | 标题和说明 | 指标语义 | | prefix/suffix | String | '' | 前后缀 | 货币、单位 | | precision | Number | 0 | 保留小数位 | 小数指标 | | separator | String | ',' | 整数千分位分隔符 | 大数字 | | trend | String | '' | up/down/flat，空时依据变化推断 | 趋势展示 | | animation | Boolean | true | 值变化时执行动画 | 动态数据 | | format | Function | null | (value: Number, context: Object) => String | 自定义显示 | | duration | Number | 900 | 动画时长 ms | 动效调整 | | loading | Boolean | false | 显示骨架屏 | 请求中 | | size | String | 'lg' | sm/md/lg | 字号调整 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

事件

事件名称	触发时机	回调参数	参数说明
无	-	-	组件未派发事件

---

插槽

插槽名	作用	作用域参数	说明
无	-	-	组件未提供插槽

主题说明

• 趋势使用 var(--xtf-color-success)、var(--xtf-color-danger) 和 var(--xtf-color-text-secondary)。
• 文案颜色由内部 xtf-text 及全局文字主题控制。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。