ChartStatistic 指标卡

用于显示单个关键指标数据的卡片组件,支持自定义格式化、主题切换、尺寸调整和弹性布局等功能。常与面积图、折线图、柱状图等图表的 statistic 属性搭配使用。

何时使用

  • 需要突出显示关键业务指标时
  • 构建数据仪表盘或概览页面
  • 需要配合图表组件展示汇总数据
  • 需要统一的数值展示格式和样式

代码演示

API

ChartStatisticProps

属性说明类型默认值版本
title指标标题string--
tooltip鼠标悬停时显示的提示信息string--
value显示的数值number | string | null | undefined--
precision数值精度(小数点后位数)number--
groupSeparator千分位分隔符string','-
prefix数值前缀(如货币符号)string''-
suffix数值后缀(如单位)string''-
formatter自定义格式化函数,优先级高于其他格式化选项(value: number | string | null | undefined) => React.ReactNode--
className自定义类名string''-
theme主题风格'light' | 'dark''light'-
size组件尺寸'small' | 'default' | 'large''default'-
block是否使用块级布局(弹性占用空间,多个时平分父容器宽度)booleanfalse-
extra右上角自定义内容(图标、按钮等)React.ReactNode--

特性说明

数值格式化

组件提供了灵活的数值格式化能力:

  1. 自动处理异常值:null、undefined、空字符串、无效数字都会显示为 --
  2. 精度控制:通过 precision 属性控制小数点后位数
  3. 千分位分隔:支持自定义千分位分隔符,默认为逗号
  4. 前缀后缀:支持添加货币符号、单位等
  5. 自定义格式化:通过 formatter 函数完全自定义显示内容和样式

主题支持

  • Light 主题:适用于浅色背景,文字颜色为深色
  • Dark 主题:适用于深色背景,文字颜色为浅色,支持悬停状态

尺寸规格

尺寸标题字号数值字号使用场景
small12px20px紧凑型布局
default13px24px常规使用
large13px30px重要指标突出

布局模式

  • 普通模式:固定最小宽度 160px,内容居左对齐
  • Block 模式:弹性布局,自动占用可用空间
    • 单个使用时占满父容器
    • 多个使用时平分父容器宽度
    • 内容左对齐,适合指标卡场景