Tremor

Tremor 面向 React 数据产品提供图表、KPI 和仪表盘界面。官网当前同时展示 copy-and-paste 源码与 NPM package 两种方式，并连接 Tremor Blocks、模板和 Figma UI Kit。安装文档说明 Tremor Raw 面向 React 18.2+，并要求 Tailwind CSS 4+；选型前需要先确认项目基线。

先定义指标问题再选择图表

仪表盘不是图表越多越完整。先写清用户要判断趋势、构成、排名、分布还是异常，再选择折线、柱状、面积、环形或表格。每张图保留指标定义、单位、时间范围和数据更新时间，避免视觉精致却无法解释业务。

两种组件交付方式取舍不同

数据结构要在组件外整理

图表通常需要 index、category、value 与颜色映射。将接口清洗、缺失值、时区和单位转换放在稳定的数据层，不要散落在每个 Tooltip 与组件内部。空数组、零值、负数、超大数和重复类别都应有明确展示规则。

颜色必须表达稳定含义

同一指标在不同页面使用相同颜色，正负和告警状态不要只依赖红绿。图例、Tooltip、标签和表格应互相对应；系列过多时优先筛选、分面或提供明细，而不是继续增加难以区分的颜色。暗色主题下重新检查网格线和弱文本。

仪表盘要覆盖非理想状态

• 初次加载与局部刷新；
• 没有数据、权限不足和接口错误；
• 筛选条件无结果；
• 数据延迟或更新时间未知；
• 移动端表格与图表降级；
• 导出结果与屏幕显示的口径一致。

交互图表需要键盘和文本替代

Hover Tooltip 对触屏和键盘用户不够。为关键数据提供可聚焦点、清楚标签或相邻数据表；颜色之外增加形状、文字和数值。图表动画响应减少动态偏好，实时刷新时避免频繁抢夺焦点或让数值无法阅读。

Blocks 与模板仍要做架构审查

页面区块和模板能加快启动，但身份认证、数据请求、权限、状态管理和部署方式必须与现有项目一致。购买或复制前查看当前许可与依赖，删除演示数据和无关模块；采用源码方式时记录来源版本，便于后续比较上游修复。