@echarts-extension/layout-core

Language: English | 中文

Shared layout and rendering helpers for the ECharts extension packages in this monorepo. Most chart users do not import this package directly; use it when you are building a new extension or testing the local graph layouts.

Install

npm install @echarts-extension/layout-core

If you are rendering through ECharts, install echarts in the host application as well.

Compute a Layout

import { computeGraphLayout } from '@echarts-extension/layout-core';

const result = computeGraphLayout('radial', {
  nodes: [
    { id: 'root', value: 10 },
    { id: 'a', value: 4 },
    { id: 'b', value: 3 }
  ],
  edges: [
    { source: 'root', target: 'a' },
    { source: 'root', target: 'b' }
  ]
}, {
  center: [300, 220],
  unitRadius: 90,
  nodeSize: 18
});

console.log(result.nodes);

computeGraphLayout(type, input, options) supports arc, concentric, grid, mds, and radial.

Register a Graph Series

import * as echarts from 'echarts/lib/echarts';
import { installGraphLayout } from '@echarts-extension/layout-core';

installGraphLayout(echarts, {
  chartType: 'customRadial',
  layoutType: 'radial'
});

The registered series accepts ECharts graph-style data/links or nodes/edges input and renders nodes, labels, and links with the shared graph view.

Main Exports

• normalizeGraphData: normalizes graph-style input into nodes and edges.
• computeGraphLayout: dispatches to a named graph layout.
• computeArcLayout, computeConcentricLayout, computeGridLayout, computeMDSLayout, computeRadialLayout: layout-specific APIs.
• installGraphLayout: registers a graph-style ECharts series.
• installFisheyeController, resolveFisheyeOptions, fisheyeTransform: reusable fisheye magnifier primitives for chart packages.
• installElementHover, renderAlive, clearAliveRender, setAliveRenderKey: shared rendering helpers used by custom chart packages.

Options

This table is generated by scripts/sync-options-from-readmes.mjs --write-readmes. Update the English README option table, then run npm run docs:sync-options to refresh the docs page.

| Option | Description | Values | | --- | --- | --- | | type | Selects which graph layout algorithm to run. | 'radial' \| 'concentric' \| 'grid' \| 'mds' \| 'arc' | | input | Groups graph input data and link options. | Object | | input.data | Graph nodes to place. Same effect as input.nodes. | Array<object \| unknown[]> | | input.data.id | Record id. | string \| number | | input.data.name | Display name. | string | | input.data.value | Numeric value. | number | | input.data.itemStyle | Per-record item style. | Object | | input.data.itemStyle.color | Fill color. | string | | input.data.itemStyle.fill | Alias for fill color. | string | | input.data.itemStyle.opacity | Fill opacity. | number | | input.data.itemStyle.borderColor | Border color. | string | | input.data.itemStyle.borderWidth | Border width. | number | | input.data.itemStyle.borderRadius | Corner radius. | number | | input.data.itemStyle.shadowBlur | Shadow blur radius. | number | | input.data.itemStyle.shadowColor | Shadow color. | string | | input.data.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | input.data.label | Per-record label style. | Object | | input.data.label.show | Shows labels when true. | boolean | | input.data.label.color | Label text color. | string | | input.data.label.fontSize | Label text size. | number | | input.data.label.fontWeight | Label font weight. | string \| number | | input.data.label.formatter | Formats label text. | string \| function | | input.data.x | X coordinate or category. | number | | input.data.y | Y coordinate or category. | number | | input.data.size | Per-record size. | number | | input.nodes | Same effect as input.data. Graph nodes to place. | Array<object \| unknown[]> | | input.nodes.id | Record id. | string \| number | | input.nodes.name | Display name. | string | | input.nodes.value | Numeric value. | number | | input.nodes.itemStyle | Per-record item style. | Object | | input.nodes.itemStyle.color | Fill color. | string | | input.nodes.itemStyle.fill | Alias for fill color. | string | | input.nodes.itemStyle.opacity | Fill opacity. | number | | input.nodes.itemStyle.borderColor | Border color. | string | | input.nodes.itemStyle.borderWidth | Border width. | number | | input.nodes.itemStyle.borderRadius | Corner radius. | number | | input.nodes.itemStyle.shadowBlur | Shadow blur radius. | number | | input.nodes.itemStyle.shadowColor | Shadow color. | string | | input.nodes.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | input.nodes.label | Per-record label style. | Object | | input.nodes.label.show | Shows labels when true. | boolean | | input.nodes.label.color | Label text color. | string | | input.nodes.label.fontSize | Label text size. | number | | input.nodes.label.fontWeight | Label font weight. | string \| number | | input.nodes.label.formatter | Formats label text. | string \| function | | input.nodes.x | X coordinate or category. | number | | input.nodes.y | Y coordinate or category. | number | | input.nodes.size | Per-record size. | number | | input.links | Graph edges that connect source and target nodes. Same effect as input.edges. | Array<object> | | input.links.source | Source node id or name. | string \| number | | input.links.target | Target node id or name. | string \| number | | input.edges | Same effect as input.links. Graph edges that connect source and target nodes. | Array<object> | | input.edges.source | Source node id or name. | string \| number | | input.edges.target | Target node id or name. | string \| number | | width | Layout viewport width. | number | | height | Layout viewport height. | number | | center | Layout center point inside the viewport. | [number \| string, number \| string] | | nodeSize | Node diameter used by layout spacing and overlap prevention. | number \| number[] \| function | | nodeSpacing | Extra spacing around each node. | number \| function | | preventOverlap | Separates nodes when a layout can otherwise place them too close. | boolean | | preventOverlapPadding | Extra gap used during overlap prevention. | number | | sortBy | Sorts nodes before layouts that use ordering. | string \| function | | linkDistance | Target distance between connected nodes. | number | | focusNode | Node id or name used as the radial center. | string \| number | | unitRadius | Distance between radial graph levels. | number | | strictRadial | Keeps radial nodes on strict level rings. | boolean | | maxIteration | Maximum layout iterations for radial refinement. | number | | maxPreventOverlapIteration | Maximum iterations used by overlap prevention. | number | | sortStrength | Weight applied when sorted radial nodes share a ring. | number | | maxLevelDiff | Maximum score difference before concentric nodes move to a new level. | number | | sweep | Angular span used by radial or concentric placement. | number (radians) | | equidistant | Forces concentric levels to use equal ring spacing. | boolean | | startAngle | Starting angle for circular layouts. | number (radians) | | clockwise | Places circular nodes clockwise when true. | boolean | | rows | Requested row count for grid layout. | number | | cols | Requested column count for grid layout. | number | | begin | Top-left starting point for grid layout. | [number \| string, number \| string] | | condense | Lets grid cells shrink to the minimum size needed by nodes. | boolean | | position | Pins grid nodes to explicit row and column cells. | function(node) => { row, col } | | nodeSep | Horizontal gap between nodes in arc layout. | number |