@echarts-extension/spiral

Language: English | 中文

ECharts extension chart for segmented spiral heatmaps. Import this package for side effects to register series.type = 'spiral'.

Install

npm install echarts @echarts-extension/spiral

Basic Usage

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

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

chart.setOption({
  series: [
    {
      type: 'spiral',
      data: [
        { name: 'Acquire', value: 42 },
        { name: 'Activate', value: 58 },
        { name: 'Retain', value: 36 },
        { name: 'Refer', value: 24 },
        { name: 'Revenue', value: 51 }
      ],
      turns: 2,
      segmentsPerTurn: 3,
      innerRadius: 28,
      outerRadius: '84%',
      gapAngle: 3,
      label: { show: true, position: 'outside' }
    }
  ]
});

Data

Use objects or array rows:

• Object rows read nameField and valueField.
• Array rows can be paired with dimensions, for example dimensions: ['name', 'value'].
• Values control segment color/opacity and can be bounded with min and max.

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. | 'spiral' | | 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 | Records drawn as bands along a spiral. | Array<object \| unknown[]> | | data.name | Display name. | string \| number | | data.value | Numeric value. | number | | dimensions | Names tuple columns when data rows are arrays. | string[] | | nameField | Field used for labels and names. | string \| number | | valueField | Field used for band size or color scale. | string \| number | | center | Center point of the spiral. | [number \| string, number \| string] | | padding | Inset around the spiral. | number | | innerRadius | Radius where the spiral starts. | number \| string (pixel or percent) | | outerRadius | Radius where the spiral ends. | number \| string (pixel or percent) | | turns | Number of spiral turns. | number | | segmentsPerTurn | Number of segments used per turn. | number | | startAngle | Angle where the spiral starts. | number (degrees) | | clockwise | Draws the spiral clockwise when true. | boolean | | sort | Sorts records before placement. | boolean \| 'none' \| 'asc' \| 'desc' | | gapAngle | Angular gap between segments. | number | | radialGap | Radial gap between turns. | number | | bandWidth | Width of each spiral band. | number | | min | Manual scale minimum. | number | | max | Manual scale maximum. | number | | minOpacity | Opacity used for the smallest value. | number | | maxOpacity | Opacity used for the largest value. | number | | enterAnimation | Animates spiral bands 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 | | itemStyle | Styles spiral bands. | 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 | | label | Styles band labels and controls inside/outside placement. | 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 | | emphasis | Styles bands 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 |