# antuikit / ECharts Hierarchies

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

## Install

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

## Import

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

## Demos

- [Basic treemap](https://ui.antuikit.com/embed/echarts-hierarchies/basic-treemap.md): A `treemap` series tiles each category by its value, with nested `children` drawn as smaller tiles inside their parent.
- [Basic sunburst](https://ui.antuikit.com/embed/echarts-hierarchies/basic-sunburst.md): A `sunburst` series draws each level of a family tree as a ring, with labels turned along the radius by `rotate: "radial"`.
- [Rounded corners](https://ui.antuikit.com/embed/echarts-hierarchies/rounded-sunburst.md): Set `itemStyle.borderRadius` to round every segment of a sunburst, with an empty center left by the inner `radius`.
- [Label rotation](https://ui.antuikit.com/embed/echarts-hierarchies/label-rotation.md): Use `levels` to give each ring its own color and `label.rotate`: radial, tangential or a fixed angle.
- [Monochrome](https://ui.antuikit.com/embed/echarts-hierarchies/monochrome-sunburst.md): Paint a gray sunburst and color only chosen segments with `itemStyle`, so the highlighted paths stand out in one hue.
- [Treemap to sunburst](https://ui.antuikit.com/embed/echarts-hierarchies/treemap-sunburst-transition.md): Two series sharing an `id` and `universalTransition` morph between a treemap and a sunburst every three seconds.
- [Visual map](https://ui.antuikit.com/embed/echarts-hierarchies/sunburst-visual-map.md): A continuous `visualMap` colors each sunburst segment by its value, while one node keeps its own `itemStyle.color`.
- [Left to right](https://ui.antuikit.com/embed/echarts-hierarchies/left-to-right-tree.md): A `tree` series lays a module hierarchy out from left to right, with every other branch `collapsed` until you click it.
- [Right to left](https://ui.antuikit.com/embed/echarts-hierarchies/right-to-left-tree.md): Set `orient` to `RL` to grow the tree from the right edge, with leaf labels flipped to the left of their nodes.
- [Top to bottom](https://ui.antuikit.com/embed/echarts-hierarchies/top-to-bottom-tree.md): Set `orient` to `vertical` to hang the tree from the top, with labels rotated so long names fit between siblings.
- [Bottom to top](https://ui.antuikit.com/embed/echarts-hierarchies/bottom-to-top-tree.md): Set `orient` to `BT` to grow the tree upward from the bottom, with `emphasis.focus` lighting a branch on hover.
- [Elbow links](https://ui.antuikit.com/embed/echarts-hierarchies/polyline-tree.md): Set `edgeShape` to `polyline` to join parents and children with right-angled links that fork at `edgeForkPosition`.
- [Radial tree](https://ui.antuikit.com/embed/echarts-hierarchies/radial-tree.md): Set `layout` to `radial` to spread the tree around its root, opened three levels deep by `initialTreeDepth`.
- [Multiple trees](https://ui.antuikit.com/embed/echarts-hierarchies/multiple-trees.md): Two `tree` series side by side, each placed with its own `left` and `right`, with the legend toggling either one.
- [Disk usage](https://ui.antuikit.com/embed/echarts-hierarchies/disk-usage.md): A `treemap` of folders on a disk, with `levels` setting gaps and `colorSaturation` per depth and click to drill in.
- [Parent labels](https://ui.antuikit.com/embed/echarts-hierarchies/parent-labels.md): Turn on `upperLabel` to print each folder's name in a band above its children, so every level stays readable.
- [Drill down](https://ui.antuikit.com/embed/echarts-hierarchies/drill-down.md): Set `leafDepth` to show two levels at a time, so clicking a tile drills into the next level of the option tree.
- [Gradient mapping](https://ui.antuikit.com/embed/echarts-hierarchies/gradient-mapping.md): Map each tile's change from last year to a red, gray and green range with `visualDimension` and `colorMappingBy`.
- [Budget views](https://ui.antuikit.com/embed/echarts-hierarchies/budget-modes.md): Switch a budget `treemap` between this year, last year and growth, with `rich` labels showing totals per household.
- [Reading log](https://ui.antuikit.com/embed/echarts-hierarchies/book-records.md): A `sunburst` with a `sort` function and glowing outer `levels`, coloring each book by the rating it was given.
- [Flavor wheel](https://ui.antuikit.com/embed/echarts-hierarchies/drink-flavors.md): A coffee flavor wheel where `levels` sets each ring's radius and every flavor family keeps one hue across its rings.

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