option

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

darkMode option for dark theme detection

The darkMode option is a boolean that specifies whether the chart should use dark mode. ECharts automatically detects dark mode via the backgroundColor option by default and adjusts text color accordingly. This option is typically used in themes.

color palette default values

The color option is an array that defines the palette of colors used sequentially and circularly by series if no color is explicitly set. The default color palette is: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'].

Supported color formats in ECharts

ECharts supports the following color formats: RGB colors like 'rgb(128, 128, 128)', RGBA colors with alpha channel like 'rgba(128, 128, 128, 0.5)', and hex strings like '#ccc'. Colors can also be specified as gradient colors or patterns.

Linear gradient color configuration

Linear gradients are defined with type 'linear' and require parameters x, y, x2, y2 ranging from 0 to 1, representing percentages in the graphical bounding box. If global is true, the four values are absolute pixel positions. The gradient is defined using colorStops array with offset (0-1) and color pairs. Default global is false.

Radial gradient color configuration

Radial gradients are defined with type 'radial' and require parameters x, y (center coordinates) and r (radius), all ranging from 0 to 1. The gradient is defined using colorStops array with offset (0-1) and color pairs. Default global is false.

Pattern fill configuration

Patterns can be used as fill colors with an image property (HTMLImageElement or HTMLCanvasElement, not SVG path strings) and a repeat property. The repeat property can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat' to control tiling.

backgroundColor option description

The backgroundColor option defines the background color of the chart. By default, there is no background (no color specified).

textStyle global font configuration

The textStyle option defines global font style settings applied across the chart. The default font size is 12px.

stateAnimation for state switchment

The stateAnimation option configures animation behavior when switching states. This can be configured globally at the root level or individually for each series.

blendMode default value and purpose

The blendMode option sets the type of compositing operation for drawing shapes on the canvas. The default value is 'source-over'. It supports settings for each series individually. The value 'lighter' is a common option that superimposes graphics in concentrated areas into high-brightness color (white), often used to highlight area effects.

hoverLayerThreshold default and behavior

The hoverLayerThreshold option has a default value of 3000. When the number of elements in the entire chart exceeds this threshold, a separate hover layer is used to render hovered elements. This prevents re-painting the whole canvas on hover, rendering only the hovered elements in a separate layer. Prior to ECharts 3, a separate layer was always used, but this caused issues with correct coverage and translucent element overlay, and increased memory usage on mobile devices.

useUTC option default false and timezone behavior

The useUTC option is a boolean defaulting to false. When false, axis.type 'time' uses local time for ticks, and axisLabel and tooltip display in local time. When true, axis.type 'time' uses UTC for ticks, and axisLabel and tooltip display in UTC. Labels typically display in local time by default because time values like '2012-01-02' without timezone specification usually represent local time, and should be displayed in the original timezone.

useUTC affects display time only, not parse time

The useUTC setting only affects how time is displayed, not how time values are parsed. Time values like 1491339540396, '2013-01-04', etc. are parsed according to their own rules independent of useUTC setting.

echarts.time.format UTC configuration

When using useUTC: true with the echarts.time.format helper method, the third parameter must be set to true to format time based on UTC, for example: const timeStrUTC = echarts.time.format(value, '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}', true);

options array for timeline configuration

The options option is an array used in timeline configuration. Each item in the array is an echarts option (ECUnitOption) that defines the chart state at that timeline point.

media responsive configuration structure

The media option is an array for responsive mobile-end design. Each item contains a query object with optional properties (minWidth, maxHeight, minAspectRatio) that act as AND conditions, and an option object (ECUnitOption) applied when the query matches.

media.query.minWidth property

The minWidth property in media.query is a number with no default value. It specifies the minimum width in pixels for the responsive breakpoint.

media.query.maxHeight property

The maxHeight property in media.query is a number with no default value. It specifies the maximum height in pixels for the responsive breakpoint.

media.query.minAspectRatio property

The minAspectRatio property in media.query is a number with no default value. It represents the ratio of width / height (for example, 1.3). It specifies the minimum aspect ratio for the responsive breakpoint.

media.option applied when query matches

The option property in media is an object (ECUnitOption) that is applied when the corresponding query conditions are met. Each item in the media array represents one set of query conditions and their associated option.

Give your agent this brain