@echarts-extension/organization-chart

Language: English | 中文

ECharts extension chart for organization charts. Import this package for side effects to register series.type = 'organizationChart'.

Install

npm install echarts @echarts-extension/organization-chart

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/organization-chart';

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

chart.setOption({
  series: [
    {
      type: 'organizationChart',
      orient: 'TB',
      data: {
        name: 'CEO',
        children: [
          {
            name: 'Product',
            children: [{ name: 'Design' }, { name: 'Research' }]
          },
          {
            name: 'Engineering',
            children: [{ name: 'Frontend' }, { name: 'Platform' }]
          }
        ]
      },
      label: { show: true, formatter: '{b}' }
    }
  ]
});

Data

Use one nested root, an array of nested roots, flat rows with id and parentId, or explicit nodes and links.

{
  type: 'organizationChart',
  data: [
    { id: 'ceo', name: 'CEO' },
    { id: 'ops', parentId: 'ceo', name: 'Operations' },
    { id: 'finance', parentId: 'ceo', name: 'Finance' }
  ]
}

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. | 'organizationChart' | | 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 | Tree or flat organization records. | Object \| Array<object> | | data.id | Record id. | string \| number | | data.parentId | Parent record id. | string \| number | | data.name | Display name. | string | | data.value | Numeric value. | number | | data.children | Child records. | Array<object> | | data.children.id | Record id. | string \| number | | data.children.parentId | Parent record id. | string \| number | | data.children.name | Display name. | string | | data.children.value | Numeric value. | number | | data.children.children | Child records. | Array<object> | | data.children.children.name | Display name. | string | | data.children.children.value | Numeric value. | number | | data.children.children.itemStyle | Per-record item style. | Object | | data.children.children.itemStyle.color | Fill color. | string | | data.children.children.itemStyle.fill | Alias for fill color. | string | | data.children.children.itemStyle.opacity | Fill opacity. | number | | data.children.children.itemStyle.borderColor | Border color. | string | | data.children.children.itemStyle.borderWidth | Border width. | number | | data.children.children.itemStyle.borderRadius | Corner radius. | number | | data.children.children.itemStyle.shadowBlur | Shadow blur radius. | number | | data.children.children.itemStyle.shadowColor | Shadow color. | string | | data.children.children.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | data.children.children.label | Per-record label style. | Object | | data.children.children.label.show | Shows labels when true. | boolean | | data.children.children.label.color | Label text color. | string | | data.children.children.label.fontSize | Label text size. | number | | data.children.children.label.fontWeight | Label font weight. | string \| number | | data.children.children.label.formatter | Formats label text. | string \| function | | data.children.itemStyle | Per-record item style. | Object | | data.children.itemStyle.color | Fill color. | string | | data.children.itemStyle.fill | Alias for fill color. | string | | data.children.itemStyle.opacity | Fill opacity. | number | | data.children.itemStyle.borderColor | Border color. | string | | data.children.itemStyle.borderWidth | Border width. | number | | data.children.itemStyle.borderRadius | Corner radius. | number | | data.children.itemStyle.shadowBlur | Shadow blur radius. | number | | data.children.itemStyle.shadowColor | Shadow color. | string | | data.children.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | data.children.label | Per-record label style. | 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.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 | | nodes | Flat node records for organization charts. | Array<object> | | nodes.id | Record id. | string \| number | | nodes.parentId | Parent record id. | string \| number | | nodes.name | Display name. | string \| number | | nodes.children | Child records. | Array<object> | | nodes.children.id | Record id. | string \| number | | nodes.children.parentId | Parent record id. | string \| number | | nodes.children.name | Display name. | string | | nodes.children.value | Numeric value. | number | | nodes.children.children | Child records. | Array<object> | | nodes.children.children.name | Display name. | string | | nodes.children.children.value | Numeric value. | number | | nodes.children.children.itemStyle | Per-record item style. | Object | | nodes.children.children.itemStyle.color | Fill color. | string | | nodes.children.children.itemStyle.fill | Alias for fill color. | string | | nodes.children.children.itemStyle.opacity | Fill opacity. | number | | nodes.children.children.itemStyle.borderColor | Border color. | string | | nodes.children.children.itemStyle.borderWidth | Border width. | number | | nodes.children.children.itemStyle.borderRadius | Corner radius. | number | | nodes.children.children.itemStyle.shadowBlur | Shadow blur radius. | number | | nodes.children.children.itemStyle.shadowColor | Shadow color. | string | | nodes.children.children.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | nodes.children.children.label | Per-record label style. | Object | | nodes.children.children.label.show | Shows labels when true. | boolean | | nodes.children.children.label.color | Label text color. | string | | nodes.children.children.label.fontSize | Label text size. | number | | nodes.children.children.label.fontWeight | Label font weight. | string \| number | | nodes.children.children.label.formatter | Formats label text. | string \| function | | nodes.children.itemStyle | Per-record item style. | Object | | nodes.children.itemStyle.color | Fill color. | string | | nodes.children.itemStyle.fill | Alias for fill color. | string | | nodes.children.itemStyle.opacity | Fill opacity. | number | | nodes.children.itemStyle.borderColor | Border color. | string | | nodes.children.itemStyle.borderWidth | Border width. | number | | nodes.children.itemStyle.borderRadius | Corner radius. | number | | nodes.children.itemStyle.shadowBlur | Shadow blur radius. | number | | nodes.children.itemStyle.shadowColor | Shadow color. | string | | nodes.children.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | nodes.children.label | Per-record label style. | Object | | nodes.children.label.show | Shows labels when true. | boolean | | nodes.children.label.color | Label text color. | string | | nodes.children.label.fontSize | Label text size. | number | | nodes.children.label.fontWeight | Label font weight. | string \| number | | nodes.children.label.formatter | Formats label text. | string \| function | | links | Explicit parent-child links when using node/link data. 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. Explicit parent-child links when using node/link data. | Array<object> | | edges.source | Source node id or name. | string \| number | | edges.target | Target node id or name. | string \| number | | orient | Direction of the organization tree. | 'TB' \| 'BT' \| 'LR' \| 'RL' \| 'vertical' \| 'horizontal' | | padding | Inset around the chart. | number \| object | | padding.top | Top inset. | number | | padding.right | Right inset. | number | | padding.bottom | Bottom inset. | number | | padding.left | Left inset. | number | | nodeWidth | Width of each person or group box. | number | | nodeHeight | Height of each person or group box. | number | | levelGap | Distance between hierarchy levels. | number | | siblingGap | Distance between sibling nodes. | number | | subtreeGap | Distance between separate subtrees. | number | | idField | Field used as node id. | string \| number | | parentIdField | Field used as parent id in flat data. | string \| number | | nameField | Field used for node labels. | string \| number | | childrenField | Field containing child nodes. | string \| number | | itemStyle | Styles organization nodes. | Object | | itemStyle.color | Primary color. | string | | itemStyle.fill | Fill color. | string | | itemStyle.opacity | Opacity. | number | | itemStyle.borderColor | Border color. | string | | itemStyle.borderWidth | Border width. | number | | itemStyle.borderRadius | Corner radius. | number | | lineStyle | Styles connector lines. | Object | | lineStyle.color | Primary color. | string | | lineStyle.stroke | Stroke color. | string | | lineStyle.width | Width value. | number | | lineStyle.lineWidth | Line width. | number | | lineStyle.opacity | Opacity. | number | | lineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | label | Styles node 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 | | emphasis | Styles nodes 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 |