# antuikit / ECharts Pictorial

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

## Install

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

## Import

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

## Demos

- [Repeated icons](https://ui.antuikit.com/embed/echarts-pictorial/vehicles.md): Set `symbolRepeat` on a `pictorialBar` to stack a vehicle icon along each bar, one icon shape per category.
- [Peaks and glyphs](https://ui.antuikit.com/embed/echarts-pictorial/velocity.md): Two `pictorialBar` series share a column with `barGap`: a peak shape sized to the value and a glyph placed at its tip with `symbolPosition`.
- [Dotted bars](https://ui.antuikit.com/embed/echarts-pictorial/dotted.md): A `pictorialBar` of small rects in the card's color cuts a faded bar into dots, beside a gradient bar and a smooth line.
- [Images as bars](https://ui.antuikit.com/embed/echarts-pictorial/mountain-height.md): Each data item sets its own `symbol`, so one bar stacks sheets with `symbolMargin` while two others draw a mountain image.
- [Filled silhouettes](https://ui.antuikit.com/embed/echarts-pictorial/water-content.md): Set `symbolClip` and `symbolBoundingData` so a body shape fills up to the value over a gray copy of itself, with `markLine` max and min.
- [Fixed symbol count](https://ui.antuikit.com/embed/echarts-pictorial/repeated-symbols.md): Set `symbolRepeat` to `fixed` so every row draws the same number of stars, clipped to the value and refreshed every few seconds.
- [Growing forest](https://ui.antuikit.com/embed/echarts-pictorial/forest.md): Repeated tree symbols grow out from the middle each year, with `animationEasing` set to `elasticOut` and the year as the axis name.
- [Morph into bars](https://ui.antuikit.com/embed/echarts-pictorial/bar-transition.md): Switch between icons, plain bars and diamonds, and `universalTransition` morphs each shape into the next with a staggered delay.

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