# antuikit / ECharts Matrix

> 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-matrix

## Install

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

## Import

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

## Demos

- [Nested headers](https://ui.antuikit.com/embed/echarts-matrix/nested-headers.md): A `heatmap` on the `matrix` coordinate system, whose column header nests months under a quarter and splits March in two.
- [Confusion matrix](https://ui.antuikit.com/embed/echarts-matrix/confusion.md): A `custom` series draws each `matrix` cell green or red by whether the prediction was right, with a `rich` label for the outcome and count.
- [Correlation heatmap](https://ui.antuikit.com/embed/echarts-matrix/correlation-heatmap.md): A lower-triangle `heatmap` in a `matrix`, colored from -1 to 1 by a diverging `visualMap` and labeled with each coefficient.
- [Correlation dots](https://ui.antuikit.com/embed/echarts-matrix/correlation-scatter.md): A `scatter` series in a `matrix`, where the `visualMap` maps each coefficient to both a color and a `symbolSize`.
- [Covariance matrix](https://ui.antuikit.com/embed/echarts-matrix/covariance.md): A 25 by 25 `heatmap` in a `matrix` with hidden headers, showing how strongly five groups of sensors vary together.
- [Graph in a matrix](https://ui.antuikit.com/embed/echarts-matrix/course-graph.md): A `graph` series placed on a `matrix`, so each course sits in its category column and year row, with arrows to its prerequisites.
- [Pies in a matrix](https://ui.antuikit.com/embed/echarts-matrix/pie-grid.md): Fifty-four `pie` series, each with its `center` set to a `matrix` cell, compare boys and girls in every class and grade.
- [Sparklines](https://ui.antuikit.com/embed/echarts-matrix/sparklines.md): A small `grid` and `line` in every `matrix` cell, with a merged break row and one `dataZoom` that pans all the charts at once.
- [Bars and maps in rows](https://ui.antuikit.com/embed/echarts-matrix/bars-and-maps.md): A table built on a `matrix`: a text column, two columns of mini `bar` charts and a small `geo` map that highlights each canton.
- [Trading dashboard](https://ui.antuikit.com/embed/echarts-matrix/stock-dashboard.md): Merged `matrix` cells lay out price, volume, a momentum indicator, an order book and a depth chart, each on its own `grid` in one chart.
- [Responsive layout](https://ui.antuikit.com/embed/echarts-matrix/responsive-layout.md): A `matrix` arranges four charts like a CSS grid, and a `media` query moves them into one column when the chart is narrow.
- [Periodic table](https://ui.antuikit.com/embed/echarts-matrix/periodic-table.md): A `custom` series draws every element into its `matrix` cell, colored by block, with a second series placing the notes.
- [Compatibility matrix](https://ui.antuikit.com/embed/echarts-matrix/compatibility.md): A `heatmap` with two-tone `decal` patterns per cell, switching between personality types and their four groups.

## 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-*)`.