数据展示
先看身份,再比较数字,最后追溯依据。
DataTable / StockLink / Num
点击涨跌幅表头排序。数值与表头同时右对齐,单位在表头声明。
| 指数 | 点位 | |
|---|---|---|
| 示例指数 AA | 100.00 | +1.00%上涨 |
| 示例指数 BB | 100.00 | −1.00%下跌 |
查看用法
<DataTable caption="指数示例" columns={columns} rows={indices}
getRowKey={(row) => row.instrument_id} />SourceBadge
点击标签查看来源、口径和时间。demo_only 与数据质量是独立标记。
查看用法
<SourceBadge meta={meta} />MetricGrid / MetricList
同一组数据的横向摘要与纵向清单。
- 示例点位
- 100.00冻结演示数据
- 涨跌幅
- +1.00%上涨相对前收盘
- 缺失字段
- --该字段未提供
- 示例点位
- 100.00冻结演示数据
- 涨跌幅
- +1.00%上涨相对前收盘
- 缺失字段
- --该字段未提供
查看用法
<MetricGrid items={items} columns={3} />
<MetricList items={items} />StatTile / Sparkline
指标标题、主值、变化与走势共享一套结构。
示例指数 A100.00+1.00%上涨冻结样例 · 非实时行情
查看用法
<StatTile label="上证指数" value={<Num … />}
aside={<Sparkline points={points} direction="up" label="示例走势" />} />ScoreRing / ScoreBar
评分由数字和位置编码,不代表上涨概率;缺失不能补零。
示例评分/ 100
规则评分 · 演示72
缺失维度--
查看用法
<ScoreRing value={72} label="示例评分" />
<ScoreBar value={null} label="缺失维度" />RangeMeter
展示当前值与统计区间的距离,不是目标价或买卖区间。
区间下沿 80.00区间上沿 110.00
固定演示区间,仅用于组件展示,不构成价格预测。
查看用法
<RangeMeter low="80" high="110" current="96.42" meta={meta} />所有数据示例仅用于组件排版演练,不构成投资建议。