Skip to content

KaTrend 趋势标识 ​

带箭头的趋势标识组件,用于展示数据上升/下降趋势,提供多种视觉风格。

使用场景 ​

  • 股票涨跌幅
  • 销售数据趋势
  • 网站流量变化
  • 成本/费用变化
  • 错误率变化
  • 性能指标升降

Props ​

属性类型默认值说明
valuestring必需趋势值(百分比等)
type'up' | 'down''up'趋势类型
prefixstring''前缀
suffixstring''后缀
reversebooleanfalse是否反转颜色含义
size'small' | 'medium' | 'large''medium'尺寸大小
variant'default' | 'filled' | 'soft' | 'outline''default'视觉风格

注意事项 ​

颜色规则 ​

  • 上升(up):
    • 默认:绿色(上涨是好事)
    • reverse 为 true:红色
  • 下降(down):
    • 默认:红色(下降是坏事)
    • reverse 为 true:绿色
  1. 颜色含义:
    • 默认:绿色=上升,红色=下降
    • reverse 模式:绿色=下降,红色=上升
  2. 使用场景:
    • 销售、访问量等增长指标:使用默认模式
    • 成本、错误率等下降指标:使用 reverse 模式
  3. 箭头方向:自动根据 type 显示向上/向下箭头