# antuikit / ECharts Radar

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

## Install

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

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/echarts-radar/basic.md): A `radar` with one `indicator` per department and its own `max`, comparing an allocated budget with actual spending.
- [Multiple radars](https://ui.antuikit.com/embed/echarts-radar/multiple.md): Three `radar` coordinate systems in one chart, each series picking its own through `radarIndex`, with filled areas from `areaStyle`.
- [Customized radar](https://ui.antuikit.com/embed/echarts-radar/customized.md): Style `axisName`, `splitArea` and `splitLine` per radar, with a dashed series, value labels and a `RadialGradient` fill.
- [Air quality](https://ui.antuikit.com/embed/echarts-radar/air-quality.md): A month of daily readings per city on a circular `radar`, with `legend.selectedMode` set to `single` to show one city at a time.
- [Browser share](https://ui.antuikit.com/embed/echarts-radar/browser-share.md): Twenty-eight `radar` series, one per year, colored by a `visualMap` and paged through a `scroll` legend.

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