@echarts-extension/radial-area

Language: English | 中文

ECharts extension chart for radial area and radial range-area time series. Import this package for side effects to register series.type = 'radialArea'.

Install

npm install echarts @echarts-extension/radial-area

Basic Usage

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

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

chart.setOption({
  series: [
    {
      type: 'radialArea',
      angleField: 'date',
      angleType: 'time',
      valueField: 'avg',
      minField: 'min',
      maxField: 'max',
      innerRadius: '34%',
      outerRadius: '88%',
      data: [
        { date: '2026-01-01', min: 22, avg: 28, max: 34 },
        { date: '2026-02-01', min: 24, avg: 31, max: 39 },
        { date: '2026-03-01', min: 27, avg: 36, max: 44 }
      ],
      rangeAreaStyle: { color: '#c9dceb', opacity: 0.82 },
      lineStyle: { color: '#3f86bd', width: 2 },
      showSymbol: true
    }
  ]
});

Data

Use objects or array rows:

• angleField provides the category, time, or numeric angle value.
• valueField draws the main line.
• minField and maxField draw the range area. Omit them for a simple radial area.
• Set dimensions when using array rows.

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. | 'radialArea' | | 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 | Area records. Each record provides angle and value/range fields. | Array<object \| unknown[]> | | data.angle | angle field. | unknown | | data.value | Numeric value. | number | | data.min | Minimum value. | number | | data.max | Maximum value. | number | | data.name | Display name. | string \| number | | data.range | range field. | unknown | | dimensions | Names tuple columns when data rows are arrays. | string[] | | center | Center point of the polar area. | [number \| string, number \| string] | | radius | Inner and outer radius pair. | [number \| string, number \| string] | | innerRadius | Inner radius of the area band. | number \| string (pixel or percent) | | outerRadius | Outer radius of the area band. | number \| string (pixel or percent) | | padding | Inset around the polar chart. | number | | startAngle | Angle where the series starts. | number (degrees) | | endAngle | Angle where the series ends. | number (degrees) | | angleSpan | Total angular span when endAngle is not supplied. | number (degrees) | | clockwise | Draws angle values clockwise when true. | boolean | | closed | Closes the area path back to the start. | boolean | | angleType | Controls how angle values are interpreted. | 'category' \| 'time' \| 'value' | | angleField | Field used for angle/category/time values. | string \| number | | valueField | Field used for the main value line. | string \| number | | minField | Field used for the lower range boundary. | string \| number | | maxField | Field used for the upper range boundary. | string \| number | | nameField | Field used for point names. | string \| number | | categories | Explicit category order for category angles. | Array<string \| number> | | min | Manual radial axis minimum. | number | | max | Manual radial axis maximum. | number | | tickCount | Preferred radial tick count. | number | | nice | Rounds radial extent to nicer tick values. | boolean | | grid | Shows or hides the polar grid. | Object | | grid.show | Shows the grid when true. | boolean | | radialAxis | Controls radial axis labels and split lines. | Object | | radialAxis.show | Shows the axis when true. | boolean | | radialAxis.label | Styles axis labels. | Object | | radialAxis.label.show | Shows labels when true. | boolean | | radialAxis.label.color | Label text color. | string | | radialAxis.label.fontSize | Label text size. | number | | radialAxis.label.fontWeight | Label font weight. | string \| number | | radialAxis.label.formatter | Formats label text. | string \| function | | radialAxis.splitLine | Controls split lines. | Object | | radialAxis.label.rotate | Axis label rotation. | number \| boolean \| 'tangential' | | radialAxis.splitLine.show | Shows split lines when true. | boolean | | radialAxis.splitLine.lineStyle | Styles split lines. | Object | | radialAxis.splitLine.lineStyle.show | Shows this line group when true. | boolean | | radialAxis.splitLine.lineStyle.color | Line color. | string | | radialAxis.splitLine.lineStyle.stroke | Alias for line color. | string | | radialAxis.splitLine.lineStyle.width | Line width. | number | | radialAxis.splitLine.lineStyle.lineWidth | Alias for line width. | number | | radialAxis.splitLine.lineStyle.opacity | Line opacity. | number | | radialAxis.splitLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | radialAxis.splitLine.lineStyle.dashOffset | Dash pattern offset. | number | | radialAxis.splitLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | radialAxis.splitLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | radialAxis.splitLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | radialAxis.splitLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | radialAxis.splitLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | radialAxis.splitLine.lineStyle.lineDash | Dash pattern alias. | number[] | | angleAxis | Controls angle axis labels and split lines. | Object | | angleAxis.show | Shows the axis when true. | boolean | | angleAxis.label | Styles axis labels. | Object | | angleAxis.label.show | Shows labels when true. | boolean | | angleAxis.label.color | Label text color. | string | | angleAxis.label.fontSize | Label text size. | number | | angleAxis.label.fontWeight | Label font weight. | string \| number | | angleAxis.label.formatter | Formats label text. | string \| function | | angleAxis.splitLine | Controls split lines. | Object | | angleAxis.label.rotate | Axis label rotation. | number \| boolean \| 'tangential' | | angleAxis.splitLine.show | Shows split lines when true. | boolean | | angleAxis.splitLine.lineStyle | Styles split lines. | Object | | angleAxis.splitLine.lineStyle.show | Shows this line group when true. | boolean | | angleAxis.splitLine.lineStyle.color | Line color. | string | | angleAxis.splitLine.lineStyle.stroke | Alias for line color. | string | | angleAxis.splitLine.lineStyle.width | Line width. | number | | angleAxis.splitLine.lineStyle.lineWidth | Alias for line width. | number | | angleAxis.splitLine.lineStyle.opacity | Line opacity. | number | | angleAxis.splitLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | angleAxis.splitLine.lineStyle.dashOffset | Dash pattern offset. | number | | angleAxis.splitLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | angleAxis.splitLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | angleAxis.splitLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | angleAxis.splitLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | angleAxis.splitLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | angleAxis.splitLine.lineStyle.lineDash | Dash pattern alias. | number[] | | rangeAreaStyle | Styles the band between min and max fields. | Object | | rangeAreaStyle.show | Shows this nested element when true. | boolean | | rangeAreaStyle.color | Primary color. | string | | rangeAreaStyle.opacity | Opacity. | number | | rangeAreaStyle.borderColor | Border color. | string | | rangeAreaStyle.borderWidth | Border width. | number | | areaStyle | Styles the filled area under the value line. | Object | | areaStyle.show | Shows this nested element when true. | boolean | | areaStyle.color | Primary color. | string | | areaStyle.opacity | Opacity. | number | | areaStyle.borderColor | Border color. | string | | areaStyle.borderWidth | Border width. | number | | lineStyle | Styles the value line. | 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[] | | itemStyle | Styles individual points. | 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 | | showSymbol | Shows point symbols on the line. | boolean | | symbolSize | Point symbol size. | number | | emphasis | Styles points 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 |