@echarts-extension/vector-field

Language: English | 中文

ECharts extension chart for vector field and wind data. Import this package for side effects to register series.type = 'vectorField'.

Install

npm install echarts @echarts-extension/vector-field

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/vector-field';

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

chart.setOption({
  series: [
    {
      type: 'vectorField',
      data: [
        { longitude: 0.125, latitude: 45.125, u: -2.32, v: -2.07 },
        { longitude: 0.375, latitude: 45.125, u: -2.41, v: -2.15 },
        { longitude: 0.125, latitude: 45.375, u: -2.15, v: -1.88 }
      ],
      xField: 'longitude',
      yField: 'latitude',
      uField: 'u',
      vField: 'v',
      samplingStep: 1,
      maxLength: 18,
      lineStyle: {
        color: '#1d4ed8',
        width: 1.15,
        opacity: 0.88
      }
    }
  ]
});

Data

Use objects or tuples:

• Object rows read xField, yField, uField, and vField.
• Defaults are longitude, latitude, u, and v.
• Tuple rows are [x, y, u, v].
• Invalid rows without numeric coordinates or vectors are skipped.

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. | 'vectorField' | | 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 | Vector rows. Objects use x/y/u/v fields; tuples use [x, y, u, v]. | Array<object \| [number, number, number, number]> | | data.x | X coordinate or category. | number | | data.y | Y coordinate or category. | number | | data.u | Horizontal vector component. | number | | data.v | Vertical vector component. | number | | padding | Inset around the vector field. | number | | xExtent | Explicit x-coordinate domain. | [number, number] | | yExtent | Explicit y-coordinate domain. | [number, number] | | xField | Field used for x coordinates. | string | | yField | Field used for y coordinates. | string | | uField | Field used for horizontal vector components. | string | | vField | Field used for vertical vector components. | string | | invertY | Flips y values for north-up coordinate rendering. | boolean | | samplingStep | Renders every nth vector for dense data. | number | | minLength | Minimum arrow length after scaling. | number | | maxLength | Maximum arrow length after scaling. | number \| null | | lengthScale | Multiplier from vector magnitude to arrow length. | number \| null | | arrowHeadLength | Length of arrow heads. | number \| null | | arrowHeadAngle | Angle of arrow heads. | number \| null (radians) | | layout | Nested layout option object. | Object | | layout.xExtent | Explicit x-coordinate domain. | [number, number] | | layout.yExtent | Explicit y-coordinate domain. | [number, number] | | layout.xField | Field used for x coordinates. | string | | layout.yField | Field used for y coordinates. | string | | layout.uField | Field used for horizontal vector components. | string | | layout.vField | Field used for vertical vector components. | string | | layout.invertY | Flips y values for north-up coordinate rendering. | boolean | | layout.samplingStep | Renders every nth vector for dense data. | number | | layout.minLength | Minimum arrow length after scaling. | number | | layout.maxLength | Maximum arrow length after scaling. | number \| null | | layout.lengthScale | Multiplier from vector magnitude to arrow length. | number \| null | | layout.arrowHeadLength | Length of arrow heads. | number \| null | | layout.arrowHeadAngle | Angle of arrow heads. | number \| null (radians) | | layoutOptions | Alias for nested layout options. | Same fields as layout | | layoutOptions.xExtent | Explicit x-coordinate domain. | [number, number] | | layoutOptions.yExtent | Explicit y-coordinate domain. | [number, number] | | layoutOptions.xField | Field used for x coordinates. | string | | layoutOptions.yField | Field used for y coordinates. | string | | layoutOptions.uField | Field used for horizontal vector components. | string | | layoutOptions.vField | Field used for vertical vector components. | string | | layoutOptions.invertY | Flips y values for north-up coordinate rendering. | boolean | | layoutOptions.samplingStep | Renders every nth vector for dense data. | number | | layoutOptions.minLength | Minimum arrow length after scaling. | number | | layoutOptions.maxLength | Maximum arrow length after scaling. | number \| null | | layoutOptions.lengthScale | Multiplier from vector magnitude to arrow length. | number \| null | | layoutOptions.arrowHeadLength | Length of arrow heads. | number \| null | | layoutOptions.arrowHeadAngle | Angle of arrow heads. | number \| null (radians) | | enterAnimation | Animates arrows 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 | | lineStyle | Styles arrows. | 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[] | | emphasis | Styles arrows 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 | | tooltip | Controls ECharts tooltip behavior. | Object | | tooltip.trigger | ECharts tooltip trigger mode. | string |