@echarts-extension/smith

Language: English | 中文

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

Install

npm install echarts @echarts-extension/smith

Basic Usage

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

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

chart.setOption({
  series: [
    {
      type: 'smith',
      referenceImpedance: 50,
      resistanceField: 'resistance',
      reactanceField: 'reactance',
      data: [
        { name: 'Matched', resistance: 50, reactance: 0 },
        { name: 'Inductive', resistance: 75, reactance: 25 },
        { name: 'Capacitive', resistance: 25, reactance: -20 }
      ],
      label: { show: true },
      showSwrCircle: true
    }
  ]
});

Data

By default rows are read as impedance values and normalized by referenceImpedance.

• Object rows can use r/x, resistance/reactance, or custom fields.
• Array rows can be paired with dimensions.
• Set dataType: 'gamma' to provide reflection coefficient values through gamma, gammaReal, and gammaImag.

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. | 'smith' | | 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 | Impedance or reflection-coefficient records. | Array<object \| unknown[]> | | data.name | Display name. | string | | data.resistance | resistance field. | number | | data.reactance | reactance field. | number | | data.gamma | gamma field. | [number, number] \| string | | data.gammaReal | gamma real field. | number | | data.gammaImag | gamma imag field. | number | | 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 | | dataType | How input data is interpreted. | 'impedance' \| 'gamma' | | referenceImpedance | Reference impedance used to normalize values. | number | | dimensions | Names tuple columns when data rows are arrays. | string[] | | nameField | Field used for labels and names. | string \| number | | resistanceField | Field used for resistance values. | string \| number | | reactanceField | Field used for reactance values. | string \| number | | gammaField | Field containing a reflection coefficient pair. | string \| number | | gammaRealField | Field used for gamma real values. | string \| number | | gammaImagField | Field used for gamma imaginary values. | string \| number | | resistanceValues | Grid resistance circles to draw. | number[] | | reactanceValues | Grid reactance arcs to draw. | number[] | | padding | Inset around the Smith chart. | number \| object | | padding.top | Top inset. | number | | padding.right | Right inset. | number | | padding.bottom | Bottom inset. | number | | padding.left | Left inset. | number | | showSwrCircle | Shows the selected SWR circle when true. | boolean | | swrMagnitude | Magnitude used for the SWR circle. | number | | swrIndex | Index of a data point used to derive the SWR circle. | number | | symbolSize | Point symbol size. | number | | grid | Controls Smith chart grid lines and labels. | Object | | grid.show | Shows the Smith chart grid when true. | boolean | | grid.unitCircle | Styles the unit circle grid line. | Object | | grid.axisLine | Styles the horizontal axis line. | Object | | grid.resistanceLine | Styles resistance grid circles. | Object | | grid.reactanceLine | Styles reactance grid arcs. | Object | | grid.label | Styles grid labels. | Object | | grid.label.show | Shows labels when true. | boolean | | grid.label.color | Label text color. | string | | grid.label.fontSize | Label text size. | number | | grid.label.fontWeight | Label font weight. | string \| number | | grid.label.formatter | Formats label text. | string \| function | | grid.unitCircle.show | Shows this grid line group when true. | boolean | | grid.unitCircle.lineStyle | Styles this grid line group. | Object | | grid.unitCircle.lineStyle.show | Shows this line group when true. | boolean | | grid.unitCircle.lineStyle.color | Line color. | string | | grid.unitCircle.lineStyle.stroke | Alias for line color. | string | | grid.unitCircle.lineStyle.width | Line width. | number | | grid.unitCircle.lineStyle.lineWidth | Alias for line width. | number | | grid.unitCircle.lineStyle.opacity | Line opacity. | number | | grid.unitCircle.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | grid.unitCircle.lineStyle.dashOffset | Dash pattern offset. | number | | grid.unitCircle.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | grid.unitCircle.lineStyle.cornerRadius | Corner radius for routed lines. | number | | grid.unitCircle.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | grid.unitCircle.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | grid.unitCircle.lineStyle.dashArray | Dash pattern. | number[] \| string | | grid.unitCircle.lineStyle.lineDash | Dash pattern alias. | number[] | | grid.axisLine.show | Shows this grid line group when true. | boolean | | grid.axisLine.lineStyle | Styles this grid line group. | Object | | grid.axisLine.lineStyle.show | Shows this line group when true. | boolean | | grid.axisLine.lineStyle.color | Line color. | string | | grid.axisLine.lineStyle.stroke | Alias for line color. | string | | grid.axisLine.lineStyle.width | Line width. | number | | grid.axisLine.lineStyle.lineWidth | Alias for line width. | number | | grid.axisLine.lineStyle.opacity | Line opacity. | number | | grid.axisLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | grid.axisLine.lineStyle.dashOffset | Dash pattern offset. | number | | grid.axisLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | grid.axisLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | grid.axisLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | grid.axisLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | grid.axisLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | grid.axisLine.lineStyle.lineDash | Dash pattern alias. | number[] | | grid.resistanceLine.show | Shows this grid line group when true. | boolean | | grid.resistanceLine.lineStyle | Styles this grid line group. | Object | | grid.resistanceLine.lineStyle.show | Shows this line group when true. | boolean | | grid.resistanceLine.lineStyle.color | Line color. | string | | grid.resistanceLine.lineStyle.stroke | Alias for line color. | string | | grid.resistanceLine.lineStyle.width | Line width. | number | | grid.resistanceLine.lineStyle.lineWidth | Alias for line width. | number | | grid.resistanceLine.lineStyle.opacity | Line opacity. | number | | grid.resistanceLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | grid.resistanceLine.lineStyle.dashOffset | Dash pattern offset. | number | | grid.resistanceLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | grid.resistanceLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | grid.resistanceLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | grid.resistanceLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | grid.resistanceLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | grid.resistanceLine.lineStyle.lineDash | Dash pattern alias. | number[] | | grid.reactanceLine.show | Shows this grid line group when true. | boolean | | grid.reactanceLine.lineStyle | Styles this grid line group. | Object | | grid.reactanceLine.lineStyle.show | Shows this line group when true. | boolean | | grid.reactanceLine.lineStyle.color | Line color. | string | | grid.reactanceLine.lineStyle.stroke | Alias for line color. | string | | grid.reactanceLine.lineStyle.width | Line width. | number | | grid.reactanceLine.lineStyle.lineWidth | Alias for line width. | number | | grid.reactanceLine.lineStyle.opacity | Line opacity. | number | | grid.reactanceLine.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | grid.reactanceLine.lineStyle.dashOffset | Dash pattern offset. | number | | grid.reactanceLine.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | grid.reactanceLine.lineStyle.cornerRadius | Corner radius for routed lines. | number | | grid.reactanceLine.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | grid.reactanceLine.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | grid.reactanceLine.lineStyle.dashArray | Dash pattern. | number[] \| string | | grid.reactanceLine.lineStyle.lineDash | Dash pattern alias. | number[] | | grid.label.resistanceFormatter | Formats resistance labels. | string \| function | | grid.label.reactanceFormatter | Formats reactance labels. | string \| function | | swrStyle | Styles the SWR circle. | Object | | swrStyle.color | Primary color. | string | | swrStyle.stroke | Stroke color. | string | | swrStyle.width | Width value. | number | | swrStyle.lineWidth | Line width. | number | | swrStyle.opacity | Opacity. | number | | swrStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | lineStyle | Styles connecting 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[] | | itemStyle | Styles data 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 | | label | Styles point 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 | | cursor | Controls the interactive impedance cursor. | Object | | cursor.show | Shows the interactive cursor when true. | boolean | | cursor.lineStyle | Styles cursor guide lines. | Object | | cursor.lineStyle.show | Shows this line group when true. | boolean | | cursor.lineStyle.color | Line color. | string | | cursor.lineStyle.stroke | Alias for line color. | string | | cursor.lineStyle.width | Line width. | number | | cursor.lineStyle.lineWidth | Alias for line width. | number | | cursor.lineStyle.opacity | Line opacity. | number | | cursor.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | cursor.lineStyle.dashOffset | Dash pattern offset. | number | | cursor.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | cursor.lineStyle.cornerRadius | Corner radius for routed lines. | number | | cursor.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | cursor.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | cursor.lineStyle.dashArray | Dash pattern. | number[] \| string | | cursor.lineStyle.lineDash | Dash pattern alias. | number[] | | cursor.circleStyle | Styles cursor circles. | Object | | cursor.circleStyle.show | Shows this line group when true. | boolean | | cursor.circleStyle.color | Line color. | string | | cursor.circleStyle.stroke | Alias for line color. | string | | cursor.circleStyle.width | Line width. | number | | cursor.circleStyle.lineWidth | Alias for line width. | number | | cursor.circleStyle.opacity | Line opacity. | number | | cursor.circleStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | cursor.circleStyle.dashOffset | Dash pattern offset. | number | | cursor.circleStyle.lineDashOffset | Alias for dash pattern offset. | number | | cursor.circleStyle.cornerRadius | Corner radius for routed lines. | number | | cursor.circleStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | cursor.circleStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | cursor.circleStyle.dashArray | Dash pattern. | number[] \| string | | cursor.circleStyle.lineDash | Dash pattern alias. | number[] | | cursor.curveStyle | Styles cursor curves. | Object | | cursor.curveStyle.show | Shows this line group when true. | boolean | | cursor.curveStyle.color | Line color. | string | | cursor.curveStyle.stroke | Alias for line color. | string | | cursor.curveStyle.width | Line width. | number | | cursor.curveStyle.lineWidth | Alias for line width. | number | | cursor.curveStyle.opacity | Line opacity. | number | | cursor.curveStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | cursor.curveStyle.dashOffset | Dash pattern offset. | number | | cursor.curveStyle.lineDashOffset | Alias for dash pattern offset. | number | | cursor.curveStyle.cornerRadius | Corner radius for routed lines. | number | | cursor.curveStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | cursor.curveStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | cursor.curveStyle.dashArray | Dash pattern. | number[] \| string | | cursor.curveStyle.lineDash | Dash pattern alias. | number[] | | cursor.tooltip | Styles the cursor tooltip. | Object | | cursor.tooltip.show | Shows this tooltip when true. | boolean | | cursor.tooltip.backgroundColor | Tooltip background color. | string | | cursor.tooltip.color | Tooltip text color. | string | | cursor.tooltip.fontSize | Tooltip text size. | number | | cursor.tooltip.lineHeight | Tooltip line height. | number | | cursor.tooltip.padding | Tooltip padding. | number \| [number, number] \| [number, number, number, number] | | cursor.tooltip.borderRadius | Tooltip corner radius. | number | | cursor.tooltip.borderColor | Tooltip border color. | string | | cursor.tooltip.borderWidth | Tooltip border width. | number | | cursor.tooltip.opacity | Tooltip opacity. | number | | cursor.tooltip.fontFamily | Tooltip font family. | string | | 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 |