热力图Heat Map & Heatmap Style
用冷—暖连续色阶编码数值密度，读者一眼看出热点与空白。需要清晰的色阶图例，并避免用红绿单独承载正负含义。
典型场景行为分析 · 资源调度 · 排班
编号29
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
用冷—暖连续色阶编码数值密度，读者一眼看出热点与空白。需要清晰的色阶图例，并避免用红绿单独承载正负含义。
关键词
Color-coded grid/matrixdata intensity visualizationgeographical heat mapscorrelation matricescell-based representationgradient coloring
别名
Heat MapHeat Map & Heatmap
效果与动效
Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation
设计系统变量
--heatmap-cool#0080FF--heatmap-neutral#FFFFFF--heatmap-hot#FF0000--cell-size24px--legend-width200px--tooltip-bgrgba(0,0,0,0.9)配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)
辅色 / Secondary
Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options
强调色在页面底色上的对比度约 4.0:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Geographical analysis
- performance matrices
- correlation analysis
- user behavior heatmaps
- temperature/intensity data
避开 / Do Not Use For
- Linear data representation
- categorical comparisons (use bar charts)
- small datasets
框架兼容
rechartschartjsd3
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Color scale clear,
- Legend visible,
- Tooltips informative,
- Colorblind alternatives,
- Zoom/pan for geo,
- Performance for large data
CSS / 技术关键词
display: grid, background: linear-gradient for legend, cell hover states, tooltip positioning, color scale (blue→white→red), SVG for geographic, canvas for large datasets
AI 提示词
Design a heatmap visualization. Use: color gradient scale (cool to hot), cell-based grid, intensity legend, hover tooltips, geographic or matrix layout, divergent color scheme for +/- values, accessible color alternatives.