@echarts-extension/radial

Language: English | 中文

ECharts extension chart using a custom radial graph layout. Import this package for side effects to register series.type = 'radial'.

Install

npm install echarts @echarts-extension/radial

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/radial';

const chart = echarts.init(document.getElementById('main'));

chart.setOption({
  series: [
    {
      type: 'radial',
      data: [
        { id: 'root', value: 10 },
        { id: 'a', value: 4 },
        { id: 'b', value: 3 },
        { id: 'c', value: 2 }
      ],
      links: [
        { source: 'root', target: 'a' },
        { source: 'root', target: 'b' },
        { source: 'a', target: 'c' }
      ],
      label: { show: true },
      layout: {
        focusNode: 'root',
        unitRadius: 90,
        linkDistance: 140,
        preventOverlap: true
      }
    }
  ]
});

Data

Use ECharts graph-style input:

• data or nodes for nodes.
• links or edges for connections.
• Each link uses source and target, matching a node id or name.
• When symbolSize is omitted, node size is inferred from numeric value.

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 | Registers this package series with ECharts. | 'radial' | | silent | Disables mouse events for the series when true. | boolean | | width | Series box width. | number \| string (pixel or percent) | | height | Series box height. | number \| string (pixel or percent) | | top | Distance from the top of the chart container. | number \| string (pixel or percent) | | right | Distance from the right of the chart container. | number \| string (pixel or percent) | | bottom | Distance from the bottom of the chart container. | number \| string (pixel or percent) | | left | Distance from the left of the chart container. | number \| string (pixel or percent) | | data | Graph nodes. Each node may include id, name, value, itemStyle, label, x, y, or size fields. Same effect as nodes. | Array<object \| unknown[]> | | data.id | Record id. | string \| number | | data.name | Display name. | string | | data.value | Numeric value. | number | | data.itemStyle | Per-record item style. | Object | | data.itemStyle.color | Fill color. | string | | data.itemStyle.fill | Alias for fill color. | string | | data.itemStyle.opacity | Fill opacity. | number | | data.itemStyle.borderColor | Border color. | string | | data.itemStyle.borderWidth | Border width. | number | | data.itemStyle.borderRadius | Corner radius. | number | | data.itemStyle.shadowBlur | Shadow blur radius. | number | | data.itemStyle.shadowColor | Shadow color. | string | | data.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | data.label | Per-record label style. | Object | | data.label.show | Shows labels when true. | boolean | | data.label.color | Label text color. | string | | data.label.fontSize | Label text size. | number | | data.label.fontWeight | Label font weight. | string \| number | | data.label.formatter | Formats label text. | string \| function | | data.x | X coordinate or category. | number | | data.y | Y coordinate or category. | number | | data.size | Per-record size. | number | | nodes | Same effect as data. Graph nodes. Each node may include id, name, value, itemStyle, label, x, y, or size fields. | Array<object \| unknown[]> | | nodes.id | Record id. | string \| number | | nodes.name | Display name. | string | | nodes.value | Numeric value. | number | | nodes.itemStyle | Per-record item style. | Object | | nodes.itemStyle.color | Fill color. | string | | nodes.itemStyle.fill | Alias for fill color. | string | | nodes.itemStyle.opacity | Fill opacity. | number | | nodes.itemStyle.borderColor | Border color. | string | | nodes.itemStyle.borderWidth | Border width. | number | | nodes.itemStyle.borderRadius | Corner radius. | number | | nodes.itemStyle.shadowBlur | Shadow blur radius. | number | | nodes.itemStyle.shadowColor | Shadow color. | string | | nodes.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | nodes.label | Per-record label style. | Object | | nodes.label.show | Shows labels when true. | boolean | | nodes.label.color | Label text color. | string | | nodes.label.fontSize | Label text size. | number | | nodes.label.fontWeight | Label font weight. | string \| number | | nodes.label.formatter | Formats label text. | string \| function | | nodes.x | X coordinate or category. | number | | nodes.y | Y coordinate or category. | number | | nodes.size | Per-record size. | number | | links | Graph connections. Each link connects source and target node ids or names. Same effect as edges. | Array<object> | | links.source | Source node id or name. | string \| number | | links.target | Target node id or name. | string \| number | | edges | Same effect as links. Graph connections. Each link connects source and target node ids or names. | Array<object> | | edges.source | Source node id or name. | string \| number | | edges.target | Target node id or name. | string \| number | | symbolSize | Node size. When omitted, numeric value can be used to infer size. | number \| number[] \| function | | center | Series center point inside the chart rectangle. | [number \| string, number \| string] | | layout | Nested graph layout options. | Object | | layoutOptions | Alias for nested graph layout options. | Object | | layout.focusNode | Node id or name placed at the radial center. Same effect as focusNode. | string \| number | | layout.unitRadius | Distance between graph levels. Same effect as unitRadius. | number | | layout.linkDistance | Target edge length used during layout. Same effect as linkDistance. | number | | layout.strictRadial | Keeps nodes on exact radial rings. Same effect as strictRadial. | boolean | | layout.fast | Uses the faster radial placement path. | boolean | | layout.preventOverlap | Separates crowded radial nodes. Same effect as preventOverlap. | boolean | | layout.preventOverlapPadding | Extra gap for overlap prevention. Same effect as preventOverlapPadding. | number | | layout.maxIteration | Maximum radial refinement iterations. Same effect as maxIteration. | number | | layout.maxPreventOverlapIteration | Maximum overlap-prevention iterations. Same effect as maxPreventOverlapIteration. | number | | layout.sortBy | Sorts nodes on each ring. Same effect as sortBy. | string \| function; common values include 'data' and 'degree' | | layout.sortStrength | Weight applied when sorted nodes share a ring. Same effect as sortStrength. | number | | layout.startAngle | Starting angle for fast radial placement. Same effect as startAngle. | number (radians) | | layout.clockwise | Places fast radial nodes clockwise when true. Same effect as clockwise. | boolean | | layout.sweep | Angular sweep used for ring placement. Same effect as sweep. | number (radians) | | layout.nodeSize | Node size used by layout spacing. Same effect as nodeSize. | number \| number[] \| function | | layout.nodeSpacing | Extra node spacing used by overlap prevention. Same effect as nodeSpacing. | number \| function | | focusNode | Same effect as layout.focusNode. Node id or name placed at the radial center. | string \| number | | unitRadius | Same effect as layout.unitRadius. Distance between graph levels. | number | | linkDistance | Same effect as layout.linkDistance. Target edge length used during layout. | number | | strictRadial | Same effect as layout.strictRadial. Keeps nodes on exact radial rings. | boolean | | preventOverlap | Same effect as layout.preventOverlap. Separates crowded radial nodes. | boolean | | preventOverlapPadding | Same effect as layout.preventOverlapPadding. Extra gap for overlap prevention. | number | | maxIteration | Same effect as layout.maxIteration. Maximum radial refinement iterations. | number | | maxPreventOverlapIteration | Same effect as layout.maxPreventOverlapIteration. Maximum overlap-prevention iterations. | number | | sortBy | Same effect as layout.sortBy. Sorts nodes on each ring. | string \| function; common values include 'data' and 'degree' | | sortStrength | Same effect as layout.sortStrength. Weight applied when sorted nodes share a ring. | number | | startAngle | Same effect as layout.startAngle. Starting angle for fast radial placement. | number (radians) | | clockwise | Same effect as layout.clockwise. Places fast radial nodes clockwise when true. | boolean | | sweep | Same effect as layout.sweep. Angular sweep used for ring placement. | number (radians) | | nodeSize | Same effect as layout.nodeSize. Node size used by layout spacing. | number \| number[] \| function | | nodeSpacing | Same effect as layout.nodeSpacing. Extra node spacing used by overlap prevention. | number \| function | | itemStyle | Styles graph nodes. | Object | | itemStyle.color | Primary color. | string | | itemStyle.opacity | Opacity. | number | | itemStyle.borderColor | Border color. | string | | itemStyle.borderWidth | Border width. | number | | itemStyle.shadowBlur | Shadow blur radius. | number | | itemStyle.shadowColor | Shadow color. | string | | edgeStyle | Styles graph edges. | Object | | edgeStyle.color | Primary color. | string | | edgeStyle.stroke | Stroke color. | string | | edgeStyle.width | Width value. | number | | edgeStyle.lineWidth | Line width. | number | | edgeStyle.opacity | Opacity. | number | | edgeStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | label | Styles graph node labels. | Object | | label.show | Shows labels when true. | boolean | | label.position | Label position. | string | | label.color | Label text color. | string | | label.fontSize | Label text size. | number | | label.fontWeight | Label font weight. | string \| number | | label.formatter | Formats label text. | string \| function | | label.offset | Distance between label and target element. | number | | emphasis | Styles nodes and edges while hovered. | Object | | emphasis.itemStyle | Nested item style option. | object | | emphasis.itemStyle.color | Fill color. | string | | emphasis.itemStyle.fill | Alias for fill color. | string | | emphasis.itemStyle.opacity | Fill opacity. | number | | emphasis.itemStyle.borderColor | Border color. | string | | emphasis.itemStyle.borderWidth | Border width. | number | | emphasis.itemStyle.borderRadius | Corner radius. | number | | emphasis.itemStyle.shadowBlur | Shadow blur radius. | number | | emphasis.itemStyle.shadowColor | Shadow color. | string | | emphasis.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.edgeStyle | Nested edgeStyle option. | object | | emphasis.edgeStyle.color | Fill color. | string | | emphasis.edgeStyle.fill | Alias for fill color. | string | | emphasis.edgeStyle.opacity | Fill opacity. | number | | emphasis.edgeStyle.borderColor | Border color. | string | | emphasis.edgeStyle.borderWidth | Border width. | number | | emphasis.edgeStyle.borderRadius | Corner radius. | number | | emphasis.edgeStyle.shadowBlur | Shadow blur radius. | number | | emphasis.edgeStyle.shadowColor | Shadow color. | string | | emphasis.edgeStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.focus | Nested focus option. | string | | emphasis.blurScope | Nested blurScope option. | string | | enterAnimation | Animates nodes into place. | boolean \| object | | enterAnimation.show | Shows the animation when true. | boolean | | enterAnimation.enabled | Enables the animation when true. | boolean | | enterAnimation.duration | Animation duration. | number \| function | | enterAnimation.delay | Delay before the animation starts. | number \| function | | enterAnimation.stagger | Delay added between items. | number \| function | | enterAnimation.easing | Animation easing name. | string | | edgeAnimation | Animates edge drawing. | boolean \| object | | edgeAnimation.show | Shows the animation when true. | boolean | | edgeAnimation.enabled | Enables the animation when true. | boolean | | edgeAnimation.duration | Animation duration. | number \| function | | edgeAnimation.delay | Delay before the animation starts. | number \| function | | edgeAnimation.stagger | Delay added between items. | number \| function | | edgeAnimation.easing | Animation easing name. | string | | fisheye | Configures the built-in pointer magnifier for this graph series. | false \| object | | fisheye.show | Shows and enables the magnifier when true. | boolean | | fisheye.radius | Lens radius around the pointer. | number \| string (pixel or percent) | | fisheye.scale | Magnification factor at the lens center. | number | | fisheye.labelScale | Label magnification factor near the lens center. | number | | fisheye.stroke | Lens outline color. | string | | fisheye.strokeWidth | Lens outline width. | number | | fisheye.opacity | Lens outline opacity. | number | | fisheye.preview | Runs an initial preview pulse when available. | boolean | | layoutAnimation | ECharts layout animation flag for the registered series. | boolean |