BizHeatmapCalendar 日历热力图

GitHub 风格日历热力：data 传 [{ date, value }]，view 切换年度（53 周网格）/ 月度视图，anchor 锚定年份月份。基于 ECharts（echarts-lib 注入或自动 import('echarts')，依赖策略同 BizChart）；色阶默认取主题主色透明度 5 档，可自定义。考勤出勤、用户活跃度、告警密度、营销活动日历等「按天看密度」场景。

年度视图

全年 53 周网格热力（示例数据周末密度低）；unit 为 tooltip 数值后缀。

<script setup lang="ts">
/** 年度视图：GitHub 风格全年热力（默认色阶取主题主色 5 档） */
import { BizHeatmapCalendar } from 'vue3-ep-biz-lib'
import type { BizHeatmapCell } from 'vue3-ep-biz-lib'

/** 生成全年示例数据（确定性伪随机，周末密度低） */
const data: BizHeatmapCell[] = []
{
  const start = new Date('2026-01-01').getTime()
  const end = new Date('2026-12-31').getTime()
  let i = 0
  for (let day = start; day <= end; day += 86400000) {
    const date = new Date(day)
    const weekend = date.getDay() === 0 || date.getDay() === 6
    const value = weekend ? i % 3 : (i * 7919) % 17
    data.push({ date: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`, value })
    i += 1
  }
}
</script>

<template>
  <BizHeatmapCalendar :data="data" anchor="2026-06-15" :height="180" unit=" 次" />
</template>

显示代码

月度视图与切换

2026 年 6 月告警密度

view="month" + anchor 换月重渲——告警密度看板典型用法。

<script setup lang="ts">
/** 月度视图与切换：anchor 换月重渲（业务侧常用上一月/下一月按钮驱动） */
import { computed, ref } from 'vue'
import { ElButton, ElButtonGroup } from 'element-plus'
import { BizHeatmapCalendar } from 'vue3-ep-biz-lib'
import type { BizHeatmapCell } from 'vue3-ep-biz-lib'

const monthOffset = ref(0)

const anchor = computed<string>(() => {
  const base = new Date(2026, 5, 15)
  base.setMonth(base.getMonth() + monthOffset.value)
  return `${base.getFullYear()}-${String(base.getMonth() + 1).padStart(2, '0')}-15`
})

/** 当月示例：告警密度，确定性伪随机 */
const data = computed<BizHeatmapCell[]>(() => {
  const [year, month] = anchor.value.split('-').map(Number)
  const days = new Date(year, month, 0).getDate()
  return Array.from({ length: days }, (_, i) => ({
    date: `${year}-${String(month).padStart(2, '0')}-${String(i + 1).padStart(2, '0')}`,
    value: (i * 37) % 9,
  }))
})

const title = computed(() => `${anchor.value.slice(0, 4)} 年 ${Number(anchor.value.slice(5, 7))} 月告警密度`)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 640px">
    <div style="display: flex; align-items: center; gap: 12px">
      <ElButtonGroup size="small">
        <ElButton @click="monthOffset -= 1">上一月</ElButton>
        <ElButton @click="monthOffset = 0">本月</ElButton>
        <ElButton @click="monthOffset += 1">下一月</ElButton>
      </ElButtonGroup>
      <span style="font-size: 14px; color: var(--el-text-color-regular)">{{ title }}</span>
    </div>
    <BizHeatmapCalendar :data="data" view="month" :anchor="anchor" :height="300" unit=" 次" />
  </div>
</template>

显示代码

自定义色阶与点击

colors 低 → 高色阶（本例告警红系）；格子点击 cell-click 回传 { date, value } 可下钻当日明细。

<script setup lang="ts">
/** 自定义色阶与点击：colors 低→高；格子点击回传 { date, value } */
import { ElMessage } from 'element-plus'
import { BizHeatmapCalendar } from 'vue3-ep-biz-lib'
import type { BizHeatmapCell } from 'vue3-ep-biz-lib'

const data: BizHeatmapCell[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-09-${String(i + 1).padStart(2, '0')}`,
  value: (i * 13) % 12,
}))

const onClick = (cell: { date: string; value: number }): void => {
  ElMessage.info(`${cell.date} 活跃度 ${cell.value}`)
}
</script>

<template>
  <BizHeatmapCalendar
    :data="data"
    view="month"
    anchor="2026-09-15"
    :height="300"
    :colors="['#fde2e2', '#f9b6b6', '#f28b8b', '#e45b5b', '#c93a3a']"
    unit=" 点"
    @cell-click="onClick"
  />
</template>

显示代码

年度切换

2026 年出勤热力

anchor 换年重渲全年 53 周网格（考勤 / 活跃度年度报表）。

<script setup lang="ts">
/** 年度切换：anchor 换年重渲全年网格（考勤 / 活跃度年度报表常用） */
import { computed, ref } from 'vue'
import { ElButton, ElButtonGroup } from 'element-plus'
import { BizHeatmapCalendar } from 'vue3-ep-biz-lib'
import type { BizHeatmapCell } from 'vue3-ep-biz-lib'

const year = ref(2026)

/** 全年示例：工作日活跃、节假日稀疏（确定性伪随机） */
const data = computed<BizHeatmapCell[]>(() => {
  const cells: BizHeatmapCell[] = []
  const start = new Date(year.value, 0, 1).getTime()
  const end = new Date(year.value, 11, 31).getTime()
  let i = 0
  for (let day = start; day <= end; day += 86400000) {
    const date = new Date(day)
    const weekend = date.getDay() === 0 || date.getDay() === 6
    cells.push({
      date: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
      value: weekend ? i % 3 : (i * 7919) % 17,
    })
    i += 1
  }
  return cells
})
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 760px">
    <div style="display: flex; align-items: center; gap: 12px">
      <ElButtonGroup size="small">
        <ElButton @click="year -= 1">上一年</ElButton>
        <ElButton @click="year = 2026">今年</ElButton>
        <ElButton @click="year += 1">下一年</ElButton>
      </ElButtonGroup>
      <span style="font-size: 14px; color: var(--el-text-color-regular)">{{ year }} 年出勤热力</span>
    </div>
    <BizHeatmapCalendar :data="data" :anchor="`${year}-06-15`" :height="180" unit=" 天" />
  </div>
</template>

显示代码

紧凑嵌入

构建流水线 · 9 月失败次数

labels=false 收起标签、cell-size 调小、max 固定色阶上限——仪表盘小卡片场景。

<script setup lang="ts">
/** 紧凑嵌入：labels=false 收起月份 / 星期标签、cell-size 调小、max 固定色阶上限——仪表盘小卡片场景 */
import { BizHeatmapCalendar } from 'vue3-ep-biz-lib'
import type { BizHeatmapCell } from 'vue3-ep-biz-lib'

const data: BizHeatmapCell[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-09-${String(i + 1).padStart(2, '0')}`,
  value: (i * 29) % 10,
}))
</script>

<template>
  <div style="max-width: 420px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 12px">
    <div style="font-size: 13px; color: var(--el-text-color-regular); margin-bottom: 8px">构建流水线 · 9 月失败次数</div>
    <BizHeatmapCalendar
      :data="data"
      view="month"
      anchor="2026-09-15"
      :height="150"
      :cell-size="16"
      :labels="false"
      :max="9"
      unit=" 次"
    />
  </div>
</template>

显示代码

点击下钻

点击上方任意热力格子查看当日明细

cell-click 联动当日事件明细列表（告警 / 日志检索入口）。

<script setup lang="ts">
/** 点击下钻：cell-click 回传 { date, value }，联动当日事件明细（告警 / 操作日志检索入口） */
import { ref } from 'vue'
import { ElEmpty, ElTable, ElTableColumn } from 'element-plus'
import { BizHeatmapCalendar } from 'vue3-ep-biz-lib'
import type { BizHeatmapCell } from 'vue3-ep-biz-lib'

interface AlertEvent { time: string; level: string; message: string }

const data: BizHeatmapCell[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-09-${String(i + 1).padStart(2, '0')}`,
  value: (i * 13) % 12,
}))

const selected = ref<{ date: string; value: number } | null>(null)

/** 按日期确定性生成当日事件（真实项目：拿 date 调明细接口） */
const events = ref<AlertEvent[]>([])

const onCellClick = (cell: { date: string; value: number }): void => {
  selected.value = cell
  const seed = Number(cell.date.slice(8))
  events.value = Array.from({ length: Math.min(cell.value, 4) }, (_, i) => ({
    time: `${cell.date} ${String(8 + ((seed + i) % 14)).padStart(2, '0')}:${String((seed * 7 + i * 13) % 60).padStart(2, '0')}`,
    level: ['提示', '警告', '重要'][i % 3],
    message: `CPU 使用率超过 ${(60 + ((seed + i * 11) % 35))}% 阈值`,
  }))
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 640px">
    <BizHeatmapCalendar :data="data" view="month" anchor="2026-09-15" :height="280" unit=" 次" @cell-click="onCellClick" />

    <div v-if="selected" style="border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 8px">
      <div style="font-size: 13px; color: var(--el-text-color-regular); margin-bottom: 6px">
        {{ selected.date }} 当日告警 {{ selected.value }} 次（点击的格子）：
      </div>
      <ElTable v-if="events.length > 0" :data="events" size="small" border>
        <ElTableColumn prop="time" label="时间" width="170" />
        <ElTableColumn prop="level" label="级别" width="70" />
        <ElTableColumn prop="message" label="内容" />
      </ElTable>
      <ElEmpty v-else description="当日无告警" :image-size="48" />
    </div>
    <div v-else style="font-size: 12px; color: var(--el-text-color-secondary)">点击上方任意热力格子查看当日明细</div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
data	BizHeatmapCell[]	[]	热力数据（非法日期自动忽略）
view	'year' | 'month'	year	视图粒度
anchor	string	今天	视图锚点日期 yyyy-MM-dd（year 取年、month 取年月）
echarts-lib	BizHeatmapLib	动态加载	注入 echarts 库（按需构建需含 calendar + heatmap）
height	number	190	容器高度 px
cell-size	number	year 11 / month 32	格子边长 px
colors	string[]	主色 5 档	色阶（低 → 高）
max	number	数据最大值	色阶上限
labels	boolean	true	月份 / 星期标签
unit	string	''	tooltip 数值单位后缀

Events

事件名	参数	说明
cell-click	({ date, value })	点击热力格（下钻当日明细）

Expose

属性/方法	说明
getChart()	echarts 实例（未就绪 null）
retry()	库加载失败后手动重试