Apache ECharts Documentation

WebGL in ECharts is primarily used for:

• 3D Chart Rendering: Drawing complex points, lines, and surfaces (点线面).
• GPU General Computing: Leveraging the GPU for high-performance calculations.
• Visual Quality Optimization: Implementing advanced rendering techniques like Temporal Methods to balance performance and fidelity.

Graphic elements can be transformed using translation, scaling, and rotation. Transformations are applied relative to an origin point and are performed in the following order:

1. Translate by [-origin[0], -origin[1]]
2. Scale by scale
3. Rotate by rotation
4. Translate back by origin
5. Translate by position

This order ensures that scaling and rotation do not affect the final translation.

Transformation Properties:

• position: [x, y] (default [0, 0]).
• scale: [sx, sy] (default [1, 1]).
• rotation: Angle in radians (default 0). Negative values rotate clockwise.
• origin: [ox, oy] (default [0, 0]).

{
    type: 'rect',
    position: [100, 200],
    scale: [2, 4],
    rotation: Math.PI / 4,
    origin: [10, 20]
}

ECharts renders 3D maps by using GeoJSON data that contains the outlines of administrative regions or countries.

To render these outlines in WebGL, the process involves:

1. GeoJSON Input: Providing polygon data for the regions.
2. Triangulation: Converting polygons into triangles (using algorithms like ear-clipping) to make them suitable for WebGL drawing.
3. Coloring: Filling the resulting triangular meshes with different colors based on the region data.

A scatter chart is used to present the relationship between x and y coordinates. When data includes multiple dimensions, you can visualize additional values through the symbol size and color, effectively creating a bubble chart. This is typically achieved by using the visualMap component. Scatter series can be used with grid (rectangular), polar, or geo (geographical) coordinate systems.

{
  series: {
    type: 'scatter',
    data: [
      [10.0, 8.0, 5], // [x, y, dimension_for_size]
      [8.0, 5.0, 2]
    ]
  }
}

Text fragments behave similarly to CSS inline-block elements.

Layout Rules:

• Line Height: The height of a line is determined by the largest lineHeight among the fragments in that line.
• Vertical Alignment: Controlled by verticalAlign within a fragment:
  • 'bottom': Bottom edge of fragment sticks to the bottom of the line.
  • 'top': Top edge of fragment sticks to the top of the line.
  • 'middle': Fragment is centered vertically in the line.
• Horizontal Alignment:
  • Fragments with align: 'left' are placed left-to-right.
  • Fragments with align: 'right' are placed right-to-left.
  • Remaining fragments are centered in the leftover space.
• Text Alignment: Within a fragment's own box, align determines if text is 'left', 'center', or 'right'.
• Newlines: Only \n is recognized as a line break.

For fine-grained control over how descriptions are generated, you can use templates. The generation follows a hierarchy:

1. Title: Uses aria.label.general.withTitle (if title.text exists) or aria.label.general.withoutTitle. The variable {title} can be used to inject the chart title.
2. Series: Uses aria.label.series to describe the series.
3. Data: Uses aria.label.data to describe individual data points.

Note: The description generation is triggered if aria.label.description is set to true (or if a description is provided).

To handle large trees and prevent node overlapping, use the following properties:

• expandAndCollapse: (boolean, default true) Enables users to click nodes to toggle the visibility of subtrees.
• initialTreeDepth: (number, default 2) Sets the starting level of expansion. The root is level 0.
  • Setting this to -1, null, or undefined will expand all nodes by default.

Visual Tip: When using the default 'emptyCircle' symbol, ECharts uses the inner fill to indicate if a node has a collapsed subtree. If using custom images as symbols, the automatic visual state switching for collapsed/expanded nodes is not supported.

{
  series: {
    type: 'tree',
    expandAndCollapse: true,
    initialTreeDepth: 1
  }
}

The ECharts lifecycle follows a structured workflow to transform user input into visual elements:

1. User Behavior/Action: Triggers a change.
2. State Change: Components update their internal state.
3. Data Processing: Data is processed through registered Phases.
4. View Update: The final visual representation is rendered.

This workflow decouples the specific event from the generic process of updating data and refreshing the view.

ECharts separates the concept of "coordinates" from the chart type. You can place different chart types into different coordinate systems or mix them within the same system. Supported coordinate types include:

• Rectangular coordinates: Includes Cartesian and grid systems.
• Polar coordinates.
• Geographic coordinates.

For example, you can render a line chart within a polar coordinate system.