graphic

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Graphic component basic definition

The graphic component enables creating graphic elements in ECharts. A single graphic element is defined by setting graphic to an object with a type property. Multiple graphic elements are defined by setting graphic to an array of objects, each with a type property.

Graphic element common configuration properties

All graphic elements share these common configuration properties: id (string, optional, used to specify element when updating), type (string, required when defining element initially, specifies element type), $action (string, optional, default 'merge', can be 'replace' or 'remove' to control operation performed by setOption), left (absolute value in pixels, percent string, or 'center'), right (absolute value in pixels or percent string), top (absolute value in pixels, percent string, or 'center'/'middle'), bottom (absolute value in pixels or percent string), shape (object with shape-specific properties like x, y, cx, cy, width, height, r, points; ignored if left/right/top/bottom set), style (object with style properties like fill, stroke, lineWidth, shadowBlur), z (number, z-index value), silent (boolean, default false, whether to respond to mouse/touch events), invisible (boolean, default false, whether element is visible), bounding (string, optional values 'raw' or 'all', specifies whether transformed element is confined in container), draggable (boolean, default false, whether element can be dragged), and event handlers (onclick, onmouseover, onmouseout, onmousemove, onmousewheel, onmousedown, onmouseup, ondrag, ondragstart, ondragend, ondragenter, ondragleave, ondragover, ondrop).

Graphic element transformation properties

Graphic elements can be transformed using these properties: position (array [x, y], default [0, 0], translation amount), scale (array [sx, sy], default [1, 1], scale factors), rotation (number in radians, default 0, negative value means rotating clockwise), origin (array [x, y], default [0, 0], origin point of rotation and scale). Transformation is performed in this order: translate [-origin[0], -origin[1]], scale, rotate, translate back by origin, translate by position.

Graphic element relative positioning

Graphic elements support relative positioning using left, right, top, bottom, width, and height properties. These can be absolute pixel values, percent strings, or special values like 'center' (horizontal) or 'middle' (vertical). This allows elements to be positioned relative to their container size.

Graphic group element with children

Only the group element type can have children elements. The children property accepts an array of graphic element configurations. This enables a group of elements to be positioned and transformed together.

Graphic element removal and replacement via setOption

Existing graphic elements can be removed or replaced using setOption by specifying the element's id and setting the $action property to 'remove' or 'replace'. When using setOption to modify existing elements without specifying ids, new options are mapped to existing elements by their order, which can produce unexpected results. Using id is recommended for modifications.

Graphic element event handlers

Graphic elements support these event handlers as configuration properties: onclick, onmouseover, onmouseout, onmousemove, onmousewheel, onmousedown, onmouseup, ondrag, ondragstart, ondragend, ondragenter, ondragleave, ondragover, ondrop.

Graphic bounding property behavior

The bounding property controls whether the entire transformed element (including children if it is a group) is confined within its container. Optional values are 'raw' or 'all'.

Graphic element configuration shorthand patterns

The graphic component supports shorthand patterns for convenience. The standard configuration uses graphic.elements array: {graphic: {elements: [{type: 'rect', ...}]}}. For a single element, use: {graphic: {type: 'rect', ...}}. For multiple elements, use: {graphic: [{type: 'rect', ...}, {type: 'circle', ...}]}.

Graphic component id property

The id property of a graphic element is used to specify which element to update or remove when calling setOption. It is optional and can be ignored if you do not need to update the element later.

Give your agent this brain