# antuikit / ECharts Heatmaps

> An ECharts chart painted with the theme's chart colors, axes, tooltip and type scale, in light and dark mode, compact mode and inside a `ThemeScope`. It resizes with its element.

Docs: https://antuikit.com/docs/components/echarts-heatmaps

## Install

npx antuikit@latest init
npx antuikit@latest add echarts-chart

## Import

import { EChart, type EChartOption } from "@/components/ui/echarts-chart";

## Demos

- [Calendar heatmap](https://ui.antuikit.com/embed/echarts-heatmaps/simple-calendar.md): A `heatmap` series on a `calendar` coordinate system shades every day of a year by its value, with the scale hidden.
- [Punch card](https://ui.antuikit.com/embed/echarts-heatmaps/punch-card.md): A `heatmap` on two category axes, hours by weekdays, with a draggable `visualMap` and the count written in each cell.
- [Piecewise scale](https://ui.antuikit.com/embed/echarts-heatmaps/piecewise-calendar.md): A `piecewise` `visualMap` splits a year of daily values into ranges you can click to show or hide on the calendar.
- [Stacked years](https://ui.antuikit.com/embed/echarts-heatmaps/stacked-calendars.md): Three horizontal `calendar` components, one per year, share a single `visualMap` so the years compare on one scale.
- [Vertical calendars](https://ui.antuikit.com/embed/echarts-heatmaps/vertical-calendars.md): Set `orient` to `vertical` to run each year's weeks down the page, three years side by side with a vertical scale.
- [Graph on a calendar](https://ui.antuikit.com/embed/echarts-heatmaps/calendar-graph.md): A `graph` series placed on a vertical `calendar` links milestone days with arrows over a heatmap of daily values.
- [20,000 cells](https://ui.antuikit.com/embed/echarts-heatmaps/large-heatmap.md): A `heatmap` of a 201 by 101 grid drawn with `progressive` rendering and a continuous diverging `visualMap`.
- [Discrete color bands](https://ui.antuikit.com/embed/echarts-heatmaps/piecewise-heatmap.md): The same grid mapped through a `piecewise` `visualMap` with `splitNumber` set to 8, so values fall into flat color bands.
- [Labeled month](https://ui.antuikit.com/embed/echarts-heatmaps/rainfall-calendar.md): Two label-only `scatter` series write the date, lunar day and solar terms into each cell above a rainfall `heatmap`.
- [Pies on a calendar](https://ui.antuikit.com/embed/echarts-heatmaps/calendar-pies.md): One `pie` series per day, centered on its `calendar` cell, splits each day of February into work, leisure and sleep.
- [Highlighted top days](https://ui.antuikit.com/embed/echarts-heatmaps/top-days.md): Sized `scatter` dots mark every day across two half-year calendars, and an `effectScatter` ripples on the 12 highest.
- [Mixed series](https://ui.antuikit.com/embed/echarts-heatmaps/mixed-calendars.md): Four month calendars each carry a different series, `graph`, `heatmap`, `effectScatter` and `scatter`, under two scales.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/echarts-chart`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.