# antuikit / ECharts Pie

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

## Install

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

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/echarts-pie/basic.md): A `pie` series with a `radius` of half the chart, a legend under it and a shadow on the hovered slice, with each label outside its slice.
- [Doughnut](https://ui.antuikit.com/embed/echarts-pie/doughnut.md): Give `radius` an inner and outer value to draw a ring, and show the hovered slice's name in the middle through `emphasis.label`.
- [Rounded corners](https://ui.antuikit.com/embed/echarts-pie/rounded-doughnut.md): Set `itemStyle.borderRadius` to round each slice of the ring, with a border in the card's color to separate them.
- [Gaps between slices](https://ui.antuikit.com/embed/echarts-pie/pad-angle.md): Set `padAngle` to open a gap between slices, with `borderRadius` rounding their ends.
- [Half doughnut](https://ui.antuikit.com/embed/echarts-pie/half-doughnut.md): Set `startAngle` to 180 and `endAngle` to 360, and move `center` down, to draw the ring as a half circle.
- [Rose in area mode](https://ui.antuikit.com/embed/echarts-pie/nightingale-area.md): A single `roseType: "area"` pie, where every slice has the same angle and its radius grows with the value.
- [Nightingale chart](https://ui.antuikit.com/embed/echarts-pie/nightingale.md): Set `roseType` to `radius` or `area` to size each slice by its value, here the two modes side by side over the same categories.
- [Customized pie](https://ui.antuikit.com/embed/echarts-pie/customized.md): A `visualMap` maps each value to `colorLightness` of one color, and `animationType: "scale"` grows the slices with an elastic ease.
- [Texture](https://ui.antuikit.com/embed/echarts-pie/texture.md): Give each slice an `itemStyle.decal` of stripes, dots or squares so slices stay apart without relying on color alone.
- [Label alignment](https://ui.antuikit.com/embed/echarts-pie/label-align.md): Switch `label.alignTo` between `none`, `labelLine` and `edge` to line the outer labels up at the end of their lines or at the chart's edges.
- [Label line adjust](https://ui.antuikit.com/embed/echarts-pie/label-line-adjust.md): Three pies with labels aligned to the edge, where `labelLayout` moves each line's end point to the label's outer side.
- [Scrollable legend](https://ui.antuikit.com/embed/echarts-pie/scrollable-legend.md): Set `legend.type` to `scroll` to page through fifty names in a vertical legend beside the pie.
- [Rich text label](https://ui.antuikit.com/embed/echarts-pie/rich-label.md): A `label.rich` table on one slice, with a shaded header row, a divider and weather icons drawn as `backgroundColor` images.
- [Nested pies](https://ui.antuikit.com/embed/echarts-pie/nested.md): An inner `pie` of channels inside a ring of sources, whose labels use `rich` text for the series name, value and a percent badge.

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