# antuikit / ECharts Gauge

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

## 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-gauge/basic.md): A `gauge` series with one value, a needle over a 0 to 100 dial and the value printed by `detail.formatter`.
- [Animated value](https://ui.antuikit.com/embed/echarts-gauge/progress-value.md): Turn on `progress` to fill the arc up to the value, and `detail.valueAnimation` to count the number up as it changes.
- [Progress](https://ui.antuikit.com/embed/echarts-gauge/progress.md): A thick `progress` arc with no ticks, a hollow `anchor` drawn above the needle and a large value below it.
- [Speed](https://ui.antuikit.com/embed/echarts-gauge/speed.md): A half-circle dial from `startAngle` 180 to `endAngle` 0, with a custom `pointer.icon`, rounded caps and a boxed `rich` value.
- [Stages](https://ui.antuikit.com/embed/echarts-gauge/stages.md): Split `axisLine.lineStyle.color` into three stops, and set the needle and labels to `auto` so they take the color of the stage they point at.
- [Grade](https://ui.antuikit.com/embed/echarts-gauge/grade.md): Four colored bands with an `axisLabel.formatter` that names each grade, and a triangle `pointer.icon` riding the arc.
- [Temperature](https://ui.antuikit.com/embed/echarts-gauge/temperature.md): Two `gauge` series on one center: a wide `progress` arc with ticks outside it, and a thin arc inside, both updated every two seconds.
- [Several values](https://ui.antuikit.com/embed/echarts-gauge/multi-title.md): Three `data` items on one dial, each with its own `title` and `detail` offset, and `progress.overlap` stacking their arcs.
- [Ring](https://ui.antuikit.com/embed/echarts-gauge/ring.md): Set `progress.overlap` to false to draw each value as its own ring, with the titles and values stacked in the middle.
- [Barometer](https://ui.antuikit.com/embed/echarts-gauge/barometer.md): Two `gauge` series with different ranges share a center, one with its ticks outside the line and one inside, like a dual-scale dial.
- [Clock](https://ui.antuikit.com/embed/echarts-gauge/clock.md): Three `gauge` series turned into hour, minute and second hands, with `animationEasingUpdate` set to `bounceOut` on the second hand.
- [Instrument cluster](https://ui.antuikit.com/embed/echarts-gauge/car-dashboard.md): Seven `gauge` series with their own `center`, `radius` and angles, built into a speedometer, a tachometer and fuel and coolant dials.

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