High-performance GL series types available
Apache ECharts GL provides the following high-performance GL-based series types for large data: scatterGL, graphGL, and flowGL.
series
59 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
3D series types available
Apache ECharts GL provides the following 3D series types: scatter3D, bar3D, line3D, lines3D, map3D, surface, and polygons3D.
blendMode option for GL series
The blendMode option sets the type of compositing operation to apply when drawing a new shape in GL-based series. It accepts string values. The currently supported values are 'source-over' and 'lighter'. The default value is 'source-over', which blends by alpha. The 'lighter' value enables overlap mode, where areas with concentrated graphics can be highlighted through the overlapping effect.
stack option: name of stack group
The stack option is a string that names a stack group. Series with the same stack name on the same category axis will be stacked on top of each other. Stacking only supports the stacked axis being of type 'value' or 'log'. Axes of type 'time' and 'category' are not supported as the stacked axis.
stackStrategy option: how values are stacked
The stackStrategy option (available in ECharts 5.3.3+) controls strategy for stacking values when stack is set. Optional values: 'samesign' (only stack values if the value to be stacked has the same sign as the currently cumulated stacked value; default), 'all' (stack all values regardless of positive or negative), 'positive' (only stack positive values), 'negative' (only stack negative values).
stackOrder option: order of stacked series
The stackOrder option (available in ECharts 6.0.0+) specifies stack order. Optional values: 'seriesAsc' (stack in series order; default), 'seriesDesc' (stack in reversed series order). stackOrder should be defined for all series with the same stack name. If stackOrder is defined for only some of the series, the stack order may change unexpectedly when certain series are hidden through legend toggle.
coordinateSystem option for 3D series
The coordinateSystem property specifies which coordinate system a series uses. Available options are: 'cartesian3D' (3D rectangular coordinate using xAxisIndex and yAxisIndex), 'geo3D' (3D geographic coordinate using geoIndex), 'globe' (3D globe coordinate using globeIndex), or null (no coordinate).
grid3DIndex default and purpose
grid3DIndex specifies which grid3D component the series uses, with a default value of 0 (the first grid3D component). It is only applicable when coordinateSystem is set to 'cartesian3D'.
flowGL visualizes vector field particle effects
The flowGL component visualizes the traces of the vector field through particle effects implemented by WebGL. It is commonly used to visualize phenomena such as global wind fields.
flowGL particleDensity option
The particleDensity option (number, default 128) controls the density of particles. The actual number of particles is the square of the set number. Higher particle density produces better trace effects but increases performance overhead. The particleType option can also be used to achieve clearer and more consistent traces.
flowGL particleType option
The particleType option (string, default 'point') sets the type of particle. It accepts 'point' (default) or 'line'. Point-type particles display individual points along the trajectory. Line-type particles connect the position of the last motion to the current motion with a line, making the trajectory more consistent.
flowGL particleSpeed option
The particleSpeed option (number, default 1) controls the speed of the particle. When particleType is 'point', excessive speed will make the entire track become intermittent.
flowGL particleTrail option
The particleTrail option (number, default 2) sets the length of the track of the particle. Larger values produce longer tracks.
flowGL supersampling option
The supersampling option (number, default 1) sets the oversampling ratio of the picture. Using a supersampling value of 4 can effectively improve the sharpness of the picture and reduce sawtooth artifacts. However, this requires processing more pixels and has higher performance requirements.
flowGL gridHeight option
The gridHeight option (number|string, default 'auto') sets the number of grid heights of the incoming grid data. flowGL uses this value and gridWidth to create a floating-point texture that stores the vector field for particle trajectory calculation.
flowGL data format
The data option is an array containing vector field data. Each data item is an array of four values: [position1, position2, speed1, speed2]. For geographic coordinates, these represent [lng, lat, sLng, sLat]. For Cartesian coordinates, these represent [x, y, sx, sy]. flowGL automatically calculates gridWidth and gridHeight based on regular grid data, but also supports sparse vector data where these values can be manually specified.
flowGL data example
Example of flowGL data with four vector points in a 2x2 grid: data: [[0, 0, 1, 1], [1, 0, 1, 1], [0, 1, 1, 1], [1, 1, 1, 1]]. Each data item contains four values representing position and speed on corresponding dimensions.
flowGL itemStyle.color option
The itemStyle.color option (string, default '#fff') sets the color of the vector field trace. Color is commonly used to encode the size of the vector through the visualMap component.
flowGL series type value
The flowGL series type is identified by the string value 'flowGL'.
flowGL itemStyle.opacity option
The itemStyle.opacity option (number, default 0.8) sets the transparency of vector field traces.
flowGL particleSize option
The particleSize option (number, default 1) sets the size of the particle. When particleType is 'line', this property is expressed as a line width.
map3D geographic data visualization
3D maps are primarily used for visualizing geographic area data. They can work with the visualMap component to display data such as population distribution density in different regions.
map3D height for data representation
Compared to 2D maps, 3D maps can set different heights for each area. This height can be used to display data values and to represent the height of buildings in building data visualizations.
map3D uses geo3D component configuration
The map3D series uses component-geo3D-common configuration, which contains shared geographic 3D properties and options applicable to 3D map series.
map3D series type
The map3D series type is a 3D map visualization used for displaying geographic area data. The type property value is 'map3D'.
line3D coordinate system default
The line3D series defaults to using the cartesian3D coordinate system.
series.line3D type default value
The type property of a line3D series has a default value of 'line3D'.
line3D lineStyle default width
The lineStyle property of a line3D series has a default width of 2.
line3D data format with x, y, z coordinates
Each item in the line3D data array is an array where the first three values represent x, y, and z coordinates. Additional values can be added to map to other graphical properties through the visualMap component.
line3D data structure example
Example line3D data structure: data: [[[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]]
line3D series configuration options
The line3D series supports the following configuration: type (string, default 'line3D'), name (string), lineStyle (object with default width 2), data (array of coordinate arrays), itemStyle (object for individual data item styling). It also supports zlevel, silent, and animation properties.
line3D data item properties
Each data item in a line3D series can have the following properties: name (string, the name of the data item), value (array, the data value as coordinates), itemStyle (object for styling the individual data point).
line3D used with grid3D
The line3D series can be used with the grid3D component.
Series type declaration via type property
Each series decides its diagram type through the `type` property. The series is specified in a series list where each entry declares which visualization type it represents.
scatter3D emphasis object
The emphasis object allows highlighting of graphics and labels. It contains itemStyle and label sub-objects with the same configuration options as the base itemStyle and label.
scatter3D borderColor default
The itemStyle.borderColor property defaults to '#fff'.
scatter3D series type
The scatter3D series type is a 3D scatter chart used to display data in grid3D, geo3D, or globe coordinate systems. It can visualize data using attributes such as size and color.
scatter3D type property value
The type property for a 3D scatter series must be set to 'scatter3D'.
scatter3D coordinate systems
The scatter3D series supports three coordinate systems: grid3D (Cartesian 3D), geo3D (geographic 3D), and globe (spherical).
scatter3D data format in grid3D
In grid3D coordinate system, each data item is an array where the first three values represent x, y, and z coordinates. Additional values can be included for visualMap properties like color.
scatter3D data format in geo3D and globe
In geo3D and globe coordinate systems, each data item is an array where the first two values represent longitude (lng) and latitude (lat). Additional values can be included for visualMap properties.
scatter3D data array structure example
Example scatter3D data structure: data: [[[12, 14, 10], [34, 50, 15], [56, 30, 20], [10, 15, 12], [23, 10, 14]]]
scatter3D borderWidth default
The itemStyle.borderWidth property defaults to 0.
scatter3D itemStyle options
The itemStyle object controls scatter appearance including colors and strokes. It includes borderWidth (number, default 0) and borderColor (string, default '#fff').
Surface data item properties
Each surface data item can have a name property (string) and a value property (array). Individual data items can also have their own itemStyle object for styling.
Surface default coordinate system
The surface series uses cartesian3D as its default coordinate system.
Surface series type value
The series type for surface is 'surface'.
Surface parametric option
The parametric option is a boolean with default value false. When true, the surface is rendered as a parametric surface.
Surface wireframe configuration
The wireframe object configures the surface wireframe. It has a show property (boolean, default true) to display or hide the wireframe, and a lineStyle object to configure the wireframe line appearance. The wireframe lineStyle has a default color of #222 and default width of 1.
Surface equation configuration
The equation object defines a function surface without requiring data. It contains x and y objects (each with step, min, max properties) that define the range and resolution, and a z function that takes (x: number, y: number) and returns a number representing the z value.
Surface equation example with ripple effect
Example of a surface equation configuration: equation: { x: { step: 0.1, min: -3, max: 3 }, y: { step: 0.1, min: -3, max: 3 }, z: function (x, y) { return Math.sin(x * x + y * y) * x / 3.14 } }. This creates a ripple effect.
Surface parametricEquation configuration
The parametricEquation object defines parametric surfaces using two parameters u and v. It contains u and v objects (each with step, min, max properties) and three functions x(u, v), y(u, v), z(u, v) that each return a number. Valid only when parametric is true and data is not set.
Surface parametricEquation example with metal part
Example of a parametric equation for a metal part surface: u: { min: -13.2, max: 13.2, step: 0.5 }, v: { min: -37.4, max: 37.4, step: 0.5 }, x: function(u, v) { var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2)); return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom); }, y: function(u, v) { var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2)); return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom; }, z: function(u, v) { var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2)); return 2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom; }.
Surface data array format for grid vertices
Surface data is a linear array containing X vertices by Y vertices data. Each item is [x, y, z]. For a 5x5 surface, there are 25 vertices total. Example: data: [[-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0], [-1,-0.5,0],[-0.5,-0.5,1],[0,-0.5,0],[0.5,-0.5,-1],[1,-0.5,0], [-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0], [-1,0.5,0],[-0.5,0.5,-1],[0,0.5,0],[0.5,0.5,1],[1,0.5,0], [-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]].
Surface data array format for parametric equations
For parametric surfaces, each data item stores five values: [x, y, z, u, v]. Data is indexed in the order of u, v. Example: data: [[0,0,1,-3.14,0],[0,0,1,-1.57,0],[0,0,1,0,0],[0,0,1,1.57,0],[0,0,1,3.14,0], [0,-1,0,-3.14,1.57],[-1,0,0,-1.57,1.57],[0,1,0,0,1.57],[1,0,0,1.57,1.57],[0,-1,0,3.14,1.57], [0,0,-1,-3.14,3.14],[0,0,-1,-1.57,3.14],[0,0,-1,0,3.14],[0,0,-1,1.57,3.14],[0,0,-1,3.14,3.14]].
Surface itemStyle configuration
The itemStyle object controls the color, opacity, and other visual styles of the surface.
Series definition and key components
A series in echarts represents a series of values and the diagram generated from them. Each series consists of: a series of data values, a series type specified by series.type, and other parameters that define the mapping from values to the diagram.
Series types in echarts
ECharts series types include: line (line plot), bar (bar chart), pie (pie chart), scatter (scatter plot), graph (graph plot), and tree (tree plot). The series.type property indicates both the series type and the diagram type.
Series data declaration methods
Series data can be declared in two ways: directly in series.data within each series, or by having each series retrieve data from a dataset component using the encode property to map dimensions.