emphasis

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

emphasis disabled property

The disabled property is a boolean option that disables the emphasis state for chart elements. Default value is false. When set to true, there will be no highlight effect when the mouse hovers over elements, tooltips are triggered, or legends are hovered. This can be used to improve interaction fluency when there are massive graphic elements in the chart.

emphasis focus property values and behavior

The focus property controls whether other data fades out when data is highlighted. It accepts the following string values: 'none' (default, do not fade out other data), 'self' (only focus the currently highlighted data element without fading out others), 'series' (focus on all elements of the series containing the highlighted data), 'adjacency' (in graph series, focus on adjacent nodes and edges), 'ancestor' (in tree series, focus on all ancestor nodes), 'descendant' (in tree series, focus on all descendant nodes), 'relative' (focus on all ancestor and descendant nodes, available since specific versions), and 'trajectory' (focus on all elements connected to a node or edge in graph, available since specific versions).

emphasis blurScope property

The blurScope property is a string option that controls the range of fade out when the focus property is enabled. Default value is 'coordinateSystem'. It supports three configuration values: 'coordinateSystem', 'series', and 'global'. This property was introduced in version 5.0.0.

emphasis focus and blurScope example

Example usage: emphasis: { focus: 'series', blurScope: 'coordinateSystem' }. This configuration focuses on all elements of the series while fading out elements outside the coordinate system.

state-animation duration option

The duration option controls how long animations take in milliseconds. The default value is 300. Setting duration to 0 disables animation.

state-animation easing option

The easing option controls the animation curve function. The default value is 'cubicOut'. This option accepts a string specifying the easing function name.

Bar chart emphasis state configuration

Bar charts support emphasis state configuration through the emphasis object. The emphasis state includes disabled property, focus/blur scope settings, and full support for label, labelLine, and itemStyle configurations specific to the emphasis state.

emphasis scale option default

The emphasis.scale property was added in version 5.0.0. It defaults to true. When set to true or a number, it scales to highlight data in emphasis state. Since version 5.3.2, a number can be used; the default scale value is 1.1.

blur state version

The blur property was added in version 5.0.0. It configures the blur state and is available when emphasis.focus is set.

select state version

The select property was added in version 5.0.0. It configures the select state and is available when selectedMode is set.

Radar series supports emphasis state

Radar series supports emphasis state configurations including itemStyle, label, lineStyle, and areaStyle.

pictorialBar select state availability

The select configuration object is available for pictorialBar series starting in version 5.0.0 and applies when selectedMode is set.

pictorialBar emphasis scale property

The emphasis.scale property is a boolean with default value false, introduced in version 5.0.0. It determines whether to enable hover animation.

pictorialBar blur state availability

The blur configuration object is available for pictorialBar series starting in version 5.0.0 and applies when emphasis.focus is set.

Emphasis state styling example

Example showing scatter series with both normal and emphasis states: normal state has red color and label formatter 'This is a normal label.', while emphasis state has blue color and label formatter 'This is a emphasis label.'. Emphasis configuration uses the emphasis property at the same level as itemStyle and label.

Default emphasis style behavior

By default, the emphasis style is automatically generated from the normal style. However, custom emphasis styles can be explicitly specified using the emphasis property when automatic generation is not desired.

Emphasis state styling in ECharts 4+

In ECharts 4 and later, emphasis state styles are specified using the emphasis property at the same level as normal style properties. The emphasis object contains the same style options (itemStyle, label, etc.) as the normal state, allowing independent configuration of hover/emphasis appearance.

Pre-ECharts 4 emphasis style format (deprecated)

Before ECharts 4, emphasis styles were nested under normal and emphasis sub-properties within style options (e.g., itemStyle.normal and itemStyle.emphasis). This format is still compatible but is no longer recommended.

series.hoverAnimation deprecated, use series.emphasis.scale in v5

The option series.hoverAnimation is deprecated in v5. Use series.emphasis.scale instead.

Line series clipOverflow deprecated, use clip in v5

In v5, the option series.clipOverflow is deprecated for line series. Use series.clip instead.

Multi-state interactivity: emphasis, blur, and select

In ECharts 5, there are three interactive states for data: emphasis (original hover highlighting), blur (effect that fades out non-related elements to focus the target data), and select (click to select data). Both blur and select states support styling configuration similar to emphasis. Developers can also listen to the selectchanged event to get all the selected shapes for further processing.

Give your agent this brain