@echarts-extension/subway

Language: English | 中文

ECharts extension chart for schematic subway route maps. Import this package for side effects to register series.type = 'subway'.

Install

npm install echarts @echarts-extension/subway

Basic Usage

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

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

chart.setOption({
  series: [
    {
      type: 'subway',
      lineWidth: 9,
      stationRadius: 4,
      interchangeRadius: 8,
      data: [
        {
          id: 'line1',
          name: 'Line 1',
          color: '#d51f2a',
          stations: [
            { id: 'a', name: 'Alpha', coord: [0, 120] },
            { id: 'central', name: 'Central', coord: [80, 70] },
            { id: 'east', name: 'East', coord: [180, 70] }
          ]
        },
        {
          id: 'line2',
          name: 'Line 2',
          color: '#f5a623',
          stations: [
            { id: 'north', name: 'North', coord: [20, 0] },
            { id: 'central', name: 'Central', coord: [80, 70] },
            { id: 'south', name: 'South', coord: [160, 150] }
          ]
        }
      ],
      label: { show: true },
      routeLabel: { show: true }
    }
  ]
});

Data

data is an array of routes:

• Each route can define id, name, color, stations, and optional waypoints.
• Stations can be objects with coord, x/y, or tuple rows.
• Stations with the same id across routes become interchanges.
• Use status: 'planned' or status: 'construction' on a route to draw the whole line as dashed.
• Use segments with from/to station ids to style only an extension segment, even when waypoints sit between those stations.
• This chart is schematic; it does not require a map coordinate system or base map.

{
  id: 'line1',
  name: 'Line 1',
  stations: [
    { id: 'central', name: 'Central', coord: [0, 0] },
    { id: 'east', name: 'East', coord: [80, 0] },
    { id: 'future', name: 'Future', coord: [140, 40] }
  ],
  waypoints: [
    ['central', 0, 0],
    ['east', 80, 0],
    [120, 0],
    ['future', 140, 40]
  ],
  segments: [
    { from: 'east', to: 'future', status: 'construction' }
  ]
}

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. | 'subway' | | 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 | Subway route records. Each route can include stations, segments, and waypoints. | Array<object> | | data.id | Record id. | string \| number | | data.name | Display name. | string | | data.color | color field. | string | | data.stations | Route station records. | Array<object> | | data.stations.id | Record id. | string \| number | | data.stations.name | Display name. | string | | data.stations.coord | coord field. | [number, number] | | data.stations.labelPosition | label position field. | string | | data.stations.interchange | interchange field. | boolean | | data.stations.itemStyle | Per-record item style. | Object | | data.stations.itemStyle.color | Fill color. | string | | data.stations.itemStyle.fill | Alias for fill color. | string | | data.stations.itemStyle.opacity | Fill opacity. | number | | data.stations.itemStyle.borderColor | Border color. | string | | data.stations.itemStyle.borderWidth | Border width. | number | | data.stations.itemStyle.borderRadius | Corner radius. | number | | data.stations.itemStyle.shadowBlur | Shadow blur radius. | number | | data.stations.itemStyle.shadowColor | Shadow color. | string | | data.stations.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | data.stations.label | Per-record label style. | Object | | data.stations.label.show | Shows labels when true. | boolean | | data.stations.label.color | Label text color. | string | | data.stations.label.fontSize | Label text size. | number | | data.stations.label.fontWeight | Label font weight. | string \| number | | data.stations.label.formatter | Formats label text. | string \| function | | data.segments | Route segment records. | Array<object> | | data.segments.from | Source participant or item id. | string \| number | | data.segments.to | Target participant or item id. | string \| number | | data.segments.status | status field. | string | | data.segments.lineStyle | line style field. | Object | | data.segments.lineStyle.show | Shows this line group when true. | boolean | | data.segments.lineStyle.color | Line color. | string | | data.segments.lineStyle.stroke | Alias for line color. | string | | data.segments.lineStyle.width | Line width. | number | | data.segments.lineStyle.lineWidth | Alias for line width. | number | | data.segments.lineStyle.opacity | Line opacity. | number | | data.segments.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | data.segments.lineStyle.dashOffset | Dash pattern offset. | number | | data.segments.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | data.segments.lineStyle.cornerRadius | Corner radius for routed lines. | number | | data.segments.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | data.segments.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | data.segments.lineStyle.dashArray | Dash pattern. | number[] \| string | | data.segments.lineStyle.lineDash | Dash pattern alias. | number[] | | data.waypoints | Route waypoint records. | Array<object> | | data.waypoints.id | Record id. | string \| number | | data.waypoints.x | X coordinate or category. | number | | data.waypoints.y | Y coordinate or category. | number | | data.lineStyle | line style field. | Object | | data.lineStyle.show | Shows this line group when true. | boolean | | data.lineStyle.color | Line color. | string | | data.lineStyle.stroke | Alias for line color. | string | | data.lineStyle.width | Line width. | number | | data.lineStyle.lineWidth | Alias for line width. | number | | data.lineStyle.opacity | Line opacity. | number | | data.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | data.lineStyle.dashOffset | Dash pattern offset. | number | | data.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | data.lineStyle.cornerRadius | Corner radius for routed lines. | number | | data.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | data.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | data.lineStyle.dashArray | Dash pattern. | number[] \| string | | data.lineStyle.lineDash | Dash pattern alias. | 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 | | routes | Alias for route records. | Array<object> | | routes.id | Record id. | string \| number | | routes.name | Display name. | string | | routes.color | color field. | string | | routes.stations | Route station records. | Array<object> | | routes.stations.id | Record id. | string \| number | | routes.stations.name | Display name. | string | | routes.stations.coord | coord field. | [number, number] | | routes.stations.labelPosition | label position field. | string | | routes.stations.interchange | interchange field. | boolean | | routes.stations.itemStyle | Per-record item style. | Object | | routes.stations.itemStyle.color | Fill color. | string | | routes.stations.itemStyle.fill | Alias for fill color. | string | | routes.stations.itemStyle.opacity | Fill opacity. | number | | routes.stations.itemStyle.borderColor | Border color. | string | | routes.stations.itemStyle.borderWidth | Border width. | number | | routes.stations.itemStyle.borderRadius | Corner radius. | number | | routes.stations.itemStyle.shadowBlur | Shadow blur radius. | number | | routes.stations.itemStyle.shadowColor | Shadow color. | string | | routes.stations.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | routes.stations.label | Per-record label style. | Object | | routes.stations.label.show | Shows labels when true. | boolean | | routes.stations.label.color | Label text color. | string | | routes.stations.label.fontSize | Label text size. | number | | routes.stations.label.fontWeight | Label font weight. | string \| number | | routes.stations.label.formatter | Formats label text. | string \| function | | routes.segments | Route segment records. | Array<object> | | routes.segments.from | Source participant or item id. | string \| number | | routes.segments.to | Target participant or item id. | string \| number | | routes.segments.status | status field. | string | | routes.segments.lineStyle | line style field. | Object | | routes.segments.lineStyle.show | Shows this line group when true. | boolean | | routes.segments.lineStyle.color | Line color. | string | | routes.segments.lineStyle.stroke | Alias for line color. | string | | routes.segments.lineStyle.width | Line width. | number | | routes.segments.lineStyle.lineWidth | Alias for line width. | number | | routes.segments.lineStyle.opacity | Line opacity. | number | | routes.segments.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | routes.segments.lineStyle.dashOffset | Dash pattern offset. | number | | routes.segments.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | routes.segments.lineStyle.cornerRadius | Corner radius for routed lines. | number | | routes.segments.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | routes.segments.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | routes.segments.lineStyle.dashArray | Dash pattern. | number[] \| string | | routes.segments.lineStyle.lineDash | Dash pattern alias. | number[] | | routes.waypoints | Route waypoint records. | Array<object> | | routes.waypoints.id | Record id. | string \| number | | routes.waypoints.x | X coordinate or category. | number | | routes.waypoints.y | Y coordinate or category. | number | | routes.lineStyle | line style field. | Object | | routes.lineStyle.show | Shows this line group when true. | boolean | | routes.lineStyle.color | Line color. | string | | routes.lineStyle.stroke | Alias for line color. | string | | routes.lineStyle.width | Line width. | number | | routes.lineStyle.lineWidth | Alias for line width. | number | | routes.lineStyle.opacity | Line opacity. | number | | routes.lineStyle.type | Line dash style. | 'solid' \| 'dashed' \| 'dotted' \| number[] \| string | | routes.lineStyle.dashOffset | Dash pattern offset. | number | | routes.lineStyle.lineDashOffset | Alias for dash pattern offset. | number | | routes.lineStyle.cornerRadius | Corner radius for routed lines. | number | | routes.lineStyle.cap | Line cap style. | 'round' \| 'butt' \| 'square' | | routes.lineStyle.join | Line join style. | 'round' \| 'bevel' \| 'miter' | | routes.lineStyle.dashArray | Dash pattern. | number[] \| string | | routes.lineStyle.lineDash | Dash pattern alias. | number[] | | routes.label | Per-record label style. | Object | | routes.label.show | Shows labels when true. | boolean | | routes.label.color | Label text color. | string | | routes.label.fontSize | Label text size. | number | | routes.label.fontWeight | Label font weight. | string \| number | | routes.label.formatter | Formats label text. | string \| function | | padding | Inset around the map. | number | | stationRadius | Radius for regular stations. | number | | interchangeRadius | Radius for interchange stations. | number | | lineWidth | Default width for route lines. | number | | cornerRadius | Default route corner radius. | number | | preserveAspectRatio | Keeps station coordinates from stretching differently on x and y. | boolean | | colors | Palette used for routes. | string[] | | lineStyle | Styles route lines. | Object | | lineStyle.color | Primary color. | string | | lineStyle.width | Width value. | number | | lineStyle.opacity | Opacity. | number | | lineStyle.cornerRadius | Nested cornerRadius option. | number | | lineStyle.cap | Nested cap option. | 'round' \| 'butt' \| 'square' | | lineStyle.join | Nested join option. | 'round' \| 'bevel' \| 'miter' | | lineStyle.type | Line or item type. | 'solid' \| 'dashed' \| 'dotted' \| number[] | | stationStyle | Styles regular stations. | Object | | stationStyle.color | Primary color. | string | | stationStyle.opacity | Opacity. | number | | stationStyle.borderColor | Border color. | string | | stationStyle.borderWidth | Border width. | number | | stationStyle.shadowBlur | Shadow blur radius. | number | | stationStyle.shadowColor | Shadow color. | string | | interchangeStyle | Styles interchange stations. | Object | | interchangeStyle.color | Primary color. | string | | interchangeStyle.opacity | Opacity. | number | | interchangeStyle.borderColor | Border color. | string | | interchangeStyle.borderWidth | Border width. | number | | interchangeStyle.shadowBlur | Shadow blur radius. | number | | interchangeStyle.shadowColor | Shadow color. | string | | label | Styles station 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 | | routeLabel | Styles route labels at the route start or end. | Object | | routeLabel.show | Shows labels when true. | boolean | | routeLabel.position | Label position. | string | | routeLabel.color | Label text color. | string | | routeLabel.fontSize | Label text size. | number | | routeLabel.fontWeight | Label font weight. | string \| number | | routeLabel.formatter | Formats label text. | string \| function | | emphasis | Styles stations or route elements 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 |