ExUI

Heatmap 热力图 ​

用于展示时间序列数据的热力图组件，适合展示玩家活跃度、游戏数据统计等场景。

基础用法 ​

最基础的热力图用法，展示一年的数据。

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多
vue
<script setup>
import { ref } from 'vue'

const playerActivity = ref([
  { date: '2024-01-01', value: 10 },
  { date: '2024-01-02', value: 25 },
  { date: '2024-01-03', value: 15 },
  // ... 更多数据
])

const handleCellClick = (data, event) => {
  console.log('点击了单元格:', data)
}
</script>

<template>
  <ExHeatmap 
    :data="playerActivity" 
    @cell-click="handleCellClick"
  />
</template>

不同主题 ​

通过 theme 属性可以设置不同的颜色主题。

Neon（霓虹蓝）

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

Blue（蓝色）

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

Green（绿色）

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

Purple（紫色）

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

Red（红色）

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多
vue
<template>
  <ExHeatmap :data="data" theme="neon" />
  <ExHeatmap :data="data" theme="blue" />
  <ExHeatmap :data="data" theme="green" />
  <ExHeatmap :data="data" theme="purple" />
  <ExHeatmap :data="data" theme="red" />
</template>

不同尺寸 ​

通过 size 属性可以设置热力图的尺寸。

Small

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

Medium

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

Large

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多
vue
<template>
  <ExHeatmap :data="data" size="small" />
  <ExHeatmap :data="data" size="medium" />
  <ExHeatmap :data="data" size="large" />
</template>

自定义日期范围 ​

通过 start-date 和 end-date 属性可以自定义显示的日期范围。

6月
7月
8月
9月
10月
11月
12月
一
三
五
少
多
vue
<template>
  <ExHeatmap 
    :data="data" 
    start-date="2024-06-01"
    end-date="2024-12-31"
  />
</template>

隐藏标签 ​

可以通过 show-month-labels 和 show-week-labels 属性控制标签的显示。

隐藏月份标签

一
三
五
少
多

隐藏星期标签

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
少
多

隐藏所有标签

少
多
vue
<template>
  <ExHeatmap :data="data" :show-month-labels="false" />
  <ExHeatmap :data="data" :show-week-labels="false" />
</template>

自定义单元格样式 ​

可以通过 gap 和 radius 属性自定义单元格的间距和圆角。

无间距，圆角

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

大间距，无圆角

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多
vue
<template>
  <ExHeatmap :data="data" :gap="0" :radius="4" />
  <ExHeatmap :data="data" :gap="6" :radius="0" />
</template>

禁用工具提示 ​

设置 show-tooltip 为 false 可以禁用悬停工具提示。

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多
vue
<template>
  <ExHeatmap :data="data" :show-tooltip="false" />
</template>

空数据 ​

当没有数据时，会显示空状态。

暂无数据

vue
<template>
  <ExHeatmap :data="[]" />
</template>

自定义空状态 ​

可以通过 empty 插槽自定义空状态。

空

暂无活跃数据

vue
<template>
  <ExHeatmap :data="[]">
    <template #empty>
      <div style="text-align: center; padding: 60px 20px;">
        <img src="..." alt="空" width="64" height="64" />
        <p>暂无活跃数据</p>
      </div>
    </template>
  </ExHeatmap>
</template>

响应式设计 ​

Heatmap 组件完全支持响应式设计，在移动端会自动调整尺寸和间距。

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

提示

  • 在移动端，热力图会自动缩小单元格尺寸
  • 标签字体会自动调整
  • 支持横向滚动查看完整数据
  • 建议在移动端使用 small 尺寸

使用场景 ​

玩家活跃度统计 ​

玩家活跃度热力图

展示过去一年的玩家登录活跃度

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

游戏数据统计 ​

游戏对局统计

展示过去半年的游戏对局数量

7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
一
三
五
少
多

API ​

Heatmap Props ​

属性说明类型默认值
data热力图数据HeatmapDataItem[][]
start-date开始日期（YYYY-MM-DD）string一年前
end-date结束日期（YYYY-MM-DD）string今天
size单元格尺寸'small' | 'medium' | 'large''medium'
theme主题'default' | 'blue' | 'green' | 'purple' | 'red' | 'neon''neon'
show-month-labels是否显示月份标签booleantrue
show-week-labels是否显示星期标签booleantrue
show-tooltip是否显示工具提示booleantrue
gap单元格间距number4
radius单元格圆角number2
max-value最大值（用于计算颜色深度）number自动计算
empty-text空数据文本string'暂无数据'

HeatmapDataItem 数据结构 ​

属性说明类型必填
date日期（YYYY-MM-DD 格式）string是
value数值number是

Heatmap Events ​

事件名说明类型
cell-click单元格点击事件(data: HeatmapDataItem, event: MouseEvent) => void
cell-hover单元格悬停事件(data: HeatmapDataItem | null) => void

Heatmap Slots ​

插槽名说明
empty自定义空状态

Heatmap Methods ​

方法名说明类型
getElement获取热力图DOM元素() => HTMLDivElement | null
refresh刷新热力图() => void

无障碍支持 ​

  • 每个单元格都有 title 属性，显示日期和数值
  • 支持键盘导航
  • 支持 prefers-reduced-motion 减少动画
  • 支持高对比度模式

注意事项 ​

  1. 数据格式必须为 YYYY-MM-DD 格式
  2. 数据会自动按日期排序和填充
  3. 没有数据的日期会显示为最浅的颜色
  4. 颜色深度根据数值自动计算（0-4 个等级）
  5. 建议数据量不超过一年，以保证性能