graph series coordinate system support
Graph series supports multiple coordinate systems: 'none' (default), 'cartesian2d', 'polar', 'singleAxis', 'geo', 'calendar', and 'matrix'.
graph-series
25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
graph series type
The graph series type is 'graph'. Graph is a diagram to represent nodes and the links connecting nodes, also known as a relation graph.
graph layout option
The layout option controls how nodes are positioned in a graph series. It accepts three values: 'none' (no layout, uses x and y from node data), 'circular' (adopt circular layout), or 'force' (adopt force-directed layout). The default value is 'none'.
circular layout with rotateLabel
The circular layout configuration has a rotateLabel option (boolean, default false) that controls whether to rotate the label automatically.
force-directed layout configuration options
Force-directed layout has the following configuration options: initLayout (string, initial layout before force-directed layout, defaults to using x and y from node data or random position), repulsion (Array or number, default 50, repulsion factor between nodes), gravity (number, default 0.1, gravity factor enforcing nodes toward center), edgeLength (Array or number, default 30, distance between nodes on edge), layoutAnimation (boolean, default true, whether to show iteration animation), and friction (number, default 0.6, range 0 to 1, slows down nodes' movement, experimental since v4.5.0).
nodeScaleRatio option
nodeScaleRatio is a number option (default 0.6, range 0 to 1) that controls the related zooming ratio of nodes when mouse zooming in or out. When set to 0, nodes will not zoom as the mouse zooms.
draggable option for graph nodes
draggable is a boolean option (default false) that determines if nodes are draggable. Before v5.4.1, this option was only available when using force-directed layout.
edgeSymbol configuration
edgeSymbol specifies the symbol of two ends of edge line, accepting an array of two strings (for start and end symbols separately) or a string for both ends. Default is ['none', 'none']. Example: edgeSymbol: ['circle', 'arrow'].
edgeSymbolSize configuration
edgeSymbolSize controls the size of symbols at two ends of edge line, accepting an array of two numbers (for start and end separately) or a single number for both. Default is 10. Example: edgeSymbolSize: [5, 10] gives start symbol size 5 and end symbol size 10.
lineStyle color options for graph edges
lineStyle.color for graph edges can be 'source' or 'target' to use the color of source node or target node, in addition to regular color values. The default color is '#aaa' with default width 1 and default opacity 0.5.
label default position in graph series
The label option in graph series has a default position of 'inside'.
edgeLabel configuration for graph edges
edgeLabel configuration has: show (boolean, default false) to control if label appears on edge, position (string, default 'middle') with options 'start', 'middle', or 'end', and formatter (string or Function) for label text formatting.
emphasis scale option in graph series
The emphasis.scale option in graph series is boolean or number (default true, available since v5.0.0). When true, nodes scale to highlight in emphasis state. Since v5.3.2, number values are supported with default scale value of 1.1.
blur and select states availability in graph
blur state is available in graph series since v5.0.0 when emphasis.focus is set. select state is available since v5.0.0 when selectedMode is set.
categories in graph series
categories is an optional array that defines classifications of nodes. Each node can be assigned a category through data[i].category using the category index. The style of category is applied to nodes in that category. categories can also be used in legend.
category properties in graph series
Each category object can have: name (string, used for legend and tooltip correspondence), symbol (control node symbol), itemStyle (style of nodes in this category), label (label style), emphasis (emphasis state), blur (blur state, v5.0.0+), and select (select state, v5.0.0+).
autoCurveness option for graph edges
autoCurveness (boolean, number, or Array, default false) automatically calculates curveness for multiple links between nodes. When true, enables automatic curvature with default array length 20. When number, indicates the edge curveness array length. When Array, specifies the curveness array directly. This property is invalid if lineStyle.curveness is set.
graph data structure for nodes
Graph data is an array of node objects with properties: name (string), x (number, x position), y (number, y position), fixed (boolean, if node is fixed during force layout), value (number or Array), category (number, index of category), symbol (node symbol), itemStyle (node style), label (label style), emphasis (emphasis state), blur (blur state, v5.0.0+), select (select state, v5.0.0+), and tooltip.
graph links structure
Graph links is an array of edge objects defining relationships between nodes. Each link has: source (string or number, source node name or index), target (string or number, target node name or index), value (number, edge value for mapping to edge length), lineStyle (edge line style), label (edge label), emphasis (emphasis state), blur (blur state, v5.0.0+), select (select state, v5.0.0+), symbol (edge ends symbol as Array or string), symbolSize (edge ends symbol size as Array or string), ignoreForceLayout (boolean, default false, v4.5.0+, prevents edge from force layout calculation), and tooltip.
link curveness option
The curveness option for individual links in links array is a number (default 0, range 0 to 1) that controls the curveness of edge, with larger values producing larger curveness.
ignoreForceLayout for individual edges
ignoreForceLayout is a boolean option (default false, available since v4.5.0) that prevents an individual edge from being calculated by force layout.
nodes and edges aliases in graph
In graph series, 'nodes' is an alias for 'data' and 'edges' is an alias for 'links'.
force layout initial layout options
The initLayout option in force configuration specifies the initial layout before force-directed layout is applied. It defaults to no layout, using x and y values from node data or generating positions randomly. It can also use circular layout by setting it to 'circular'.
repulsion as range in force layout
repulsion in force layout can be an array to represent a range of repulsion values. Larger values result in larger repulsion, smaller values result in smaller repulsion.
edgeLength as range in force layout
edgeLength in force layout can be an array to represent a range of edge lengths. Edges with larger values will be shorter (nodes closer), edges with smaller values will be longer.