# antuikit / ECharts Maps

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

## Install

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

## Import

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

## Demos

- [Choropleth](https://ui.antuikit.com/embed/echarts-maps/province-population.md): A `map` series colors Turkey's 81 provinces by population through a piecewise `visualMap`, so Istanbul does not wash out the rest.
- [Labeled regions](https://ui.antuikit.com/embed/echarts-maps/population-density.md): A `map` series with `label` turned on names every district, and a `visualMap` with `realtime` off recolors only when you let go.
- [SVG regions](https://ui.antuikit.com/embed/echarts-maps/svg-regions.md): Register an SVG as a map and its named shapes become regions a `map` series can color, here cuts of beef by price.
- [Custom projection](https://ui.antuikit.com/embed/echarts-maps/conic-projection.md): Pass `projection` with `project` and `unproject` functions to draw the provinces through a conic conformal projection, not plain longitude and latitude.
- [Choropleth and scatter](https://ui.antuikit.com/embed/echarts-maps/choropleth-scatter.md): A `scatter` series and a `map` series share one `geo` through `geoIndex`, each driven by its own `visualMap` for size and color.
- [Pies on a map](https://ui.antuikit.com/embed/echarts-maps/pies-on-map.md): Set a `pie` series' `coordinateSystem` to `geo` to place it at a longitude and latitude, or at a region named in `center`.
- [Route on a map](https://ui.antuikit.com/embed/echarts-maps/route-on-map.md): A `graph` series on the `geo` coordinate system links stops with arrowed edges, over regions labeled by `nameProperty`.
- [Scatter on an SVG map](https://ui.antuikit.com/embed/echarts-maps/svg-scatter.md): An `effectScatter` series placed in the coordinates of the SVG drawing, with `symbolSize` read from each point's third value.
- [Linked highlight](https://ui.antuikit.com/embed/echarts-maps/linked-highlight.md): Hovering a `bar` dispatches `highlight` on the `geo` region with the same name, and clicking regions selects several with `selectedMode`.
- [Seat picker](https://ui.antuikit.com/embed/echarts-maps/seat-picker.md): A `geo` with `selectedMode` set to `multiple` turns an SVG cabin into a seat picker, with taken seats made `silent` through `regions`.
- [Route on a floor plan](https://ui.antuikit.com/embed/echarts-maps/floor-plan-route.md): A `lines` series with `polyline` draws a dotted path over an SVG floor plan, and its `effect` moves a symbol along it.
- [Region tooltips](https://ui.antuikit.com/embed/echarts-maps/selectable-routes.md): Dispatch `geoSelect` and `showTip` from a control to select a route on an SVG map and pin its own `tooltip` beside it.
- [Moving symbols](https://ui.antuikit.com/embed/echarts-maps/moving-vehicles.md): A `lines` series with an invisible `lineStyle` moves an `effect` symbol along each path, with a color and `constantSpeed` per route.
- [Map to bar](https://ui.antuikit.com/embed/echarts-maps/map-to-bar.md): A `map` series and a `bar` series that share an `id` morph into each other through `universalTransition` every two seconds.
- [Large line set](https://ui.antuikit.com/embed/echarts-maps/flight-routes.md): A `lines` series with `large` draws more than 65,000 curved routes between airports in one pass, at a low `opacity`.
- [Progressive loading](https://ui.antuikit.com/embed/echarts-maps/progressive-routes.md): A `lines` series with `large` and `progressive` takes routes in chunks as they arrive, drawing each batch over a zoomed map.

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