# antuikit / ECharts Networks

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

## Install

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

## Import

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

## Demos

- [Basic chord](https://ui.antuikit.com/embed/echarts-networks/basic-chord.md): A `chord` series sets nodes around a ring and joins them with ribbons as wide as each link's `value`, colored by their `target`.
- [Minimum angle](https://ui.antuikit.com/embed/echarts-networks/min-angle.md): Set `minAngle` so nodes with little or no flow still get an arc wide enough to see and label, like the teams here with no links.
- [Link colors](https://ui.antuikit.com/embed/echarts-networks/link-colors.md): Set `lineStyle.color` to `source`, `target` or `gradient` to choose which end of a ribbon gives it its color, shown side by side.
- [Chord style](https://ui.antuikit.com/embed/echarts-networks/chord-style.md): Round each arc with `borderRadius`, space them with `padAngle`, fade the ribbons with `opacity` and use `focus: 'self'` on hover.
- [Simple graph](https://ui.antuikit.com/embed/echarts-networks/simple-graph.md): A `graph` series with fixed `x` and `y` positions, arrow `edgeSymbol` ends, curved links and labels on chosen edges.
- [Graph on axes](https://ui.antuikit.com/embed/echarts-networks/graph-on-cartesian.md): Set `coordinateSystem` to `cartesian2d` to place graph nodes on a category and value axis, joined in order by arrowed links.
- [Force rings](https://ui.antuikit.com/embed/echarts-networks/force-rings.md): Sixteen `graph` series, each a ring from two to seventeen nodes, laid out by `force` with its own `repulsion` and `edgeLength`.
- [Force layout](https://ui.antuikit.com/embed/echarts-networks/force-layout.md): Set `layout` to `force` to let nodes push apart and links pull them together, with `categories` coloring each group in the legend.
- [Dynamic graph](https://ui.antuikit.com/embed/echarts-networks/dynamic-graph.md): Add nodes and `edges` with `setOption` on a timer, and the `force` layout keeps settling as the network grows around a fixed center.
- [Adjacency focus](https://ui.antuikit.com/embed/echarts-networks/les-miserables.md): A `graph` with stored positions where `focus: 'adjacency'` fades everything but a character's own links, and only major names are labeled.
- [Hide overlapping labels](https://ui.antuikit.com/embed/echarts-networks/label-overlap.md): Turn on every label and set `labelLayout.hideOverlap`, so names appear as you zoom in within the `scaleLimit` range.
- [Circular layout](https://ui.antuikit.com/embed/echarts-networks/circular-layout.md): Set `layout` to `circular` to place nodes on a ring, with `rotateLabel` turning each name to point away from the center.
- [Graph over time](https://ui.antuikit.com/embed/echarts-networks/life-expectancy.md): A `graph` per country on `cartesian2d` axes traces income and life expectancy year by year, with a `single` select legend.
- [Large force graph](https://ui.antuikit.com/embed/echarts-networks/webkit-dependencies.md): A `force` graph of about 500 classes with `draggable` nodes, `roam` limited by `scaleLimit` and a `thumbnail` to find your way.
- [Package dependencies](https://ui.antuikit.com/embed/echarts-networks/npm-dependencies.md): A prepositioned `graph` of 700 packages with `roam`, `focus: 'adjacency'` labels on hover and a `thumbnail` of the whole 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-*)`.