ChartStatistic 指标卡
用于显示单个关键指标数据的卡片组件,支持自定义格式化、主题切换、尺寸调整和弹性布局等功能。常与面积图、折线图、柱状图等图表的 statistic 属性搭配使用。
何时使用
- 需要突出显示关键业务指标时
- 构建数据仪表盘或概览页面
- 需要配合图表组件展示汇总数据
- 需要统一的数值展示格式和样式
代码演示
API
ChartStatisticProps
特性说明
数值格式化
组件提供了灵活的数值格式化能力:
- 自动处理异常值:
null、undefined、空字符串、无效数字都会显示为-- - 精度控制:通过
precision属性控制小数点后位数 - 千分位分隔:支持自定义千分位分隔符,默认为逗号
- 前缀后缀:支持添加货币符号、单位等
- 自定义格式化:通过
formatter函数完全自定义显示内容和样式
主题支持
- Light 主题:适用于浅色背景,文字颜色为深色
- Dark 主题:适用于深色背景,文字颜色为浅色,支持悬停状态
尺寸规格
布局模式
- 普通模式:固定最小宽度 160px,内容居左对齐
- Block 模式:弹性布局,自动占用可用空间
- 单个使用时占满父容器
- 多个使用时平分父容器宽度
- 内容左对齐,适合指标卡场景
