# antuikit / ECharts Flows

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

## Install

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

## Import

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

## Demos

- [Basic sankey](https://ui.antuikit.com/embed/echarts-flows/basic-sankey.md): A `sankey` series draws each link as a band as wide as its `value`, and `focus: 'adjacency'` lights up a node's own flows on hover.
- [Vertical sankey](https://ui.antuikit.com/embed/echarts-flows/vertical-sankey.md): Set `orient` to `vertical` to run the flow from top to bottom, with labels above the nodes and links colored by their source.
- [Node colors](https://ui.antuikit.com/embed/echarts-flows/node-colors.md): Give each node in `data` its own `itemStyle`, so a card brand, its currencies and their cities each keep a color through the flow.
- [Levels](https://ui.antuikit.com/embed/echarts-flows/sankey-levels.md): Use `levels` to style every node at one `depth` the same way, with links taking the color of the node they leave.
- [Gradient links](https://ui.antuikit.com/embed/echarts-flows/gradient-links.md): Set `lineStyle.color` to `gradient` so each link fades from its source color to its target color across a large energy flow.
- [Align left](https://ui.antuikit.com/embed/echarts-flows/align-left.md): Set `nodeAlign` to `left` to place every node at its earliest column, so end points sit next to their sources rather than at the right edge.
- [Align right](https://ui.antuikit.com/embed/echarts-flows/align-right.md): Set `nodeAlign` to `right` to push every node to its latest column, so all sources that start late line up near the end.
- [Basic parallel](https://ui.antuikit.com/embed/echarts-flows/basic-parallel.md): A `parallel` series draws each row as a line across one `parallelAxis` per field, mixing value axes with a `category` axis.
- [Air quality](https://ui.antuikit.com/embed/echarts-flows/air-quality.md): Three cities as `parallel` series over eight axes, with a `visualMap` on PM2.5 coloring each day from clean to polluted.
- [Nutrients](https://ui.antuikit.com/embed/echarts-flows/nutrients.md): A `vertical` parallel layout over 7,600 foods, drawn with `progressive` rendering and a piecewise `visualMap` per food group.
- [Scatter matrix](https://ui.antuikit.com/embed/echarts-flows/scatter-matrix.md): A grid of `scatter` charts beside a `parallel` chart, linked by `brushLink` so a selection in one highlights the same days everywhere.
- [Funnel](https://ui.antuikit.com/embed/echarts-flows/funnel.md): A `funnel` series sorts its stages `descending` and sizes each between `minSize` and `maxSize`, with a `gap` between them.
- [Expected and actual](https://ui.antuikit.com/embed/echarts-flows/expected-vs-actual.md): Two `funnel` series on top of each other, the actual one capped by `maxSize` and raised with `z`, to compare plan and result.
- [Multiple funnels](https://ui.antuikit.com/embed/echarts-flows/multiple-funnels.md): Four `funnel` series placed with `left`, `top`, `width` and `height`, two of them turned into pyramids with `sort: 'ascending'`.
- [Funnel alignment](https://ui.antuikit.com/embed/echarts-flows/funnel-align.md): Set `funnelAlign` to `left` or `right` to line stages up along one edge, here mirrored to put two products side by side.
- [Theme river](https://ui.antuikit.com/embed/echarts-flows/theme-river.md): A `themeRiver` series stacks each topic around a center line on a time `singleAxis`, with an axis pointer that reads every topic at once.
- [Streamgraph](https://ui.antuikit.com/embed/echarts-flows/streamgraph.md): A `themeRiver` of twenty artists over 24 weeks, with labels off and the `singleAxis` ending at the last week through `max: 'dataMax'`.

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