@echarts-extension/radial-boxplot

Language: English | 中文

ECharts extension chart for radial boxplots. Import this package for side effects to register series.type = 'radialBoxplot'.

Install

npm install echarts @echarts-extension/radial-boxplot

Basic Usage

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

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

chart.setOption({
  series: [
    {
      type: 'radialBoxplot',
      categoryField: 'name',
      min: 0,
      max: 32,
      innerRadius: '18%',
      outerRadius: '82%',
      boxWidth: 0.58,
      capWidth: 0.34,
      data: [
        { name: 'Oceania', min: 1, q1: 8, median: 13, q3: 21, max: 24 },
        { name: 'East Europe', min: 4, q1: 9, median: 12, q3: 15, max: 19 },
        { name: 'Australia', min: 8, q1: 13, median: 16, q3: 20, max: 26 }
      ]
    }
  ]
});

Data

Use objects or array rows:

• categoryField or nameField identifies each angular slot.
• minField, q1Field, medianField, q3Field, and maxField can map custom field names.
• Default object fields are min, q1, median, q3, and max.
• 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. | 'radialBoxplot' | | 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 | Boxplot records. Each record provides category plus five-number summary values. | Array<object \| unknown[]> | | data.category | Category name or id. | string \| number | | data.name | Display name. | string \| number | | data.min | Minimum value. | number | | data.q1 | First quartile value. | number | | data.median | Median value. | number | | data.q3 | Third quartile value. | number | | data.max | Maximum value. | number | | dimensions | Names tuple columns when data rows are arrays. | string[] | | center | Center point of the radial boxplot. | [number \| string, number \| string] | | radius | Inner and outer radius pair. | [number \| string, number \| string] | | innerRadius | Inner radius of the plot. | number \| string (pixel or percent) | | outerRadius | Outer radius of the plot. | number \| string (pixel or percent) | | padding | Inset around the polar chart. | number | | startAngle | Angle where categories start. | number (degrees) | | endAngle | Angle where categories end. | number (degrees) | | angleSpan | Total angular span when endAngle is not supplied. | number (degrees) | | clockwise | Places categories clockwise when true. | boolean | | categoryField | Field used for category names. | string \| number | | nameField | Field used for item names. | string \| number | | minField | Field used for lower whisker values. | string \| number | | q1Field | Field used for first quartile values. | string \| number | | medianField | Field used for median values. | string \| number | | q3Field | Field used for third quartile values. | string \| number | | maxField | Field used for upper whisker values. | string \| number | | categories | Explicit category order. | Array<string \| number> | | min | Manual radial value minimum. | number | | max | Manual radial value maximum. | number | | tickCount | Preferred radial tick count. | number | | nice | Rounds radial extent to nicer tick values. | boolean | | boxWidth | Angular width of each box. | number | | capWidth | Angular width of whisker caps. | number | | labelRadius | Radius used for category labels. | number \| string (pixel or percent) | | grid | Shows or hides the polar grid. | Object | | grid.show | Shows the grid when true. | boolean | | radialAxis | Controls radial value 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 category 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[] | | itemStyle | Styles the box body. | 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 | | whiskerLineStyle | Styles whisker lines. | Object | | whiskerLineStyle.color | Primary color. | string | | whiskerLineStyle.stroke | Stroke color. | string | | whiskerLineStyle.width | Width value. | number | | whiskerLineStyle.lineWidth | Line width. | number | | whiskerLineStyle.opacity | Opacity. | number | | whiskerLineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | medianLineStyle | Styles median lines. | Object | | medianLineStyle.color | Primary color. | string | | medianLineStyle.stroke | Stroke color. | string | | medianLineStyle.width | Width value. | number | | medianLineStyle.lineWidth | Line width. | number | | medianLineStyle.opacity | Opacity. | number | | medianLineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | capLineStyle | Styles whisker caps. | Object | | capLineStyle.color | Primary color. | string | | capLineStyle.stroke | Stroke color. | string | | capLineStyle.width | Width value. | number | | capLineStyle.lineWidth | Line width. | number | | capLineStyle.opacity | Opacity. | number | | capLineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | emphasis | Styles boxes 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 |