@echarts-extension/nested-circle

Language: English | 中文

ECharts extension chart for bottom-aligned nested circle diagrams. Import this package for side effects to register series.type = 'nestedCircle'.

Install

npm install echarts @echarts-extension/nested-circle

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/nested-circle';

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

chart.setOption({
  series: [
    {
      type: 'nestedCircle',
      data: [
        { name: 'Mathematics', children: ['Probability', 'Linear Algebra', 'Calculus'] },
        { name: 'Python', children: ['Pandas', 'NumPy', 'Scikit-Learn'] },
        { name: 'SQL', children: ['Joins', 'Window Functions', 'Optimization'] }
      ],
      centerRadiusRatio: 0.3,
      label: { show: true },
      titleLabel: { show: true }
    }
  ]
});

Data

Use an ordered array of circle layers:

• Each item becomes one visible ring or circle.
• name is the layer title.
• children or items are labels rendered inside that layer.
• Child entries can be strings, numbers, or objects with name, value, and optional label.

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. | 'nestedCircle' | | 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 | Nested circle groups and child labels. | Array<object> | | data.id | Record id. | string \| number | | data.name | Display name. | string | | data.label | Per-record label style. | string | | data.value | Numeric value. | number \| string | | data.children | Child records. | Array<object> | | data.children.id | Record id. | string \| number | | data.children.name | Display name. | string | | data.children.label | Per-record label style. | string \| Object | | data.children.label.show | Shows labels when true. | boolean | | data.children.label.color | Label text color. | string | | data.children.label.fontSize | Label text size. | number | | data.children.label.fontWeight | Label font weight. | string \| number | | data.children.label.formatter | Formats label text. | string \| function | | data.children.value | Numeric value. | number \| string | | data.items | Child item records. | Array<object> | | data.items.id | Record id. | string \| number | | data.items.name | Display name. | string | | data.items.label | Per-record label style. | string \| Object | | data.items.label.show | Shows labels when true. | boolean | | data.items.label.color | Label text color. | string | | data.items.label.fontSize | Label text size. | number | | data.items.label.fontWeight | Label font weight. | string \| number | | data.items.label.formatter | Formats label text. | string \| function | | data.items.value | Numeric value. | number \| string | | 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.titleLabel | Per-record title label style. | Object | | data.titleLabel.show | Shows labels when true. | boolean | | data.titleLabel.color | Label text color. | string | | data.titleLabel.fontSize | Label text size. | number | | data.titleLabel.fontWeight | Label font weight. | string \| number | | data.titleLabel.formatter | Formats label text. | string \| function | | padding | Inset around the nested circles. | number | | center | Center point of the rings. | [number \| string, number \| string] | | radius | Outer radius of the nested circle chart. | number \| string (pixel or percent) | | centerRadiusRatio | Relative size of the center circle. | number | | labelRadiusRatio | Relative radius used by child labels. | number | | titleRadiusRatio | Relative radius used by title labels. | number | | minRingThickness | Smallest ring thickness. | number | | colors | Palette used for rings and child items. | string[] | | ringStyle | Styles the ring background. | Object | | ringStyle.opacity | Opacity. | number | | ringStyle.borderColor | Border color. | string | | ringStyle.borderWidth | Border width. | number | | itemStyle | Styles child circle items. | Object | | itemStyle.opacity | Opacity. | number | | itemStyle.borderColor | Border color. | string | | itemStyle.borderWidth | Border width. | number | | titleLabel | Styles ring title labels. | Object | | titleLabel.show | Shows labels when true. | boolean | | titleLabel.color | Label text color. | string | | titleLabel.fontSize | Label text size. | number | | titleLabel.fontWeight | Label font weight. | string \| number | | titleLabel.formatter | Formats label text. | string \| function | | titleLabel.lineHeight | Label line height. | number | | label | Styles child labels. | Object | | label.show | Shows labels when true. | boolean | | 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.lineHeight | Label line height. | number |