echarts-instance/coordinates

101 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

convertToPixel for single axis

For single xAxis or yAxis, input is a single value and output is a single pixel number. For xAxis with id 'x0' (type: number), convertToPixel({xAxisId: 'x0'}, 3000) returns horizontal pixel coordinate. For yAxis with type 'category', convertToPixel({yAxisIndex: 1}, 'my category') returns vertical pixel coordinate.

convertToPixel for polar coordinate system

For polar coordinate system, analogous to cartesian2d behavior. Only supports querying by polarIndex/polarId/polarName, not by angleAxis and radiusAxis separately.

convertToPixel for series.map

For series.map coordinate system, analogous to geo coordinate system. For example: convertToPixel({seriesId: 'my_map'}, [128.3324, 89.5344]).

convertToPixel for series.graph

For series.graph coordinate system, each graph series maintains its own coordinate system. Specify graph series in finder. Input coord (e.g., [2000, 3500]) is in graph original coordinates matching series.data[i].x and series.data[i].y. Example: convertToPixel({seriesIndex: 0}, [2000, 3500]).

convertToLayout for calendar

For calendar coordinate system, input coord is number|string|Date (timestamp, parseable time format, or Date object). Returns {rect: {x, y, width, height}, contentRect: {x, y, width, height}} where rect is cell rectangle and contentRect excludes border width.

convertToLayout for matrix

For matrix coordinate system, input identifies a rectangle whose center point is returned. Input can be ['AA', 'NN'] for named cells, [[1, 3], [0, 1]] for ordinal ranges (non-negative integers starting from 0), or ['AA', 'NN'] for string names. Returns {rect: {x, y, width, height}, matrixXYLocatorRange: [[minXOrdinal, maxXOrdinal], [minYOrdinal, maxYOrdinal]]}. Optional opt parameter supports clamp (0/null/undefined/1/2/3, default 0) and ignoreMergeCells (boolean, default false).

convertToPixel method signature and finder parameter

convertToPixel(finder: Object, coord: Array|number, opt?: unknown) => Array|number. The finder object identifies the coordinate system using xAxisIndex/xAxisId/xAxisName, yAxisIndex/yAxisId/yAxisName, gridIndex/gridId/gridName, polarIndex/polarId/polarName, geoIndex/geoId/geoName, singleAxisIndex/singleAxisId/singleAxisName, calendarIndex/calendarId/calendarName, matrixIndex/matrixId/matrixName, seriesIndex/seriesId/seriesName. Returns pixel coordinates where [0,0] is the left-top of the echarts instance dom.

convertToPixel for cartesian2d (grid)

For cartesian2d coordinate system, input coord is [value0, value1] where value0 corresponds to xAxis and value1 to yAxis. Data types depend on axis.type: 'value' or 'log' expects [number, number]; 'category' accepts [(number|string), (number|string)] where string is original data and number is ordinal; 'time' accepts [(number|string|Date), (number|string|Date)] where number is timestamp and string/Date are parseable time formats.

interval option for axis segmentation

The interval option compulsively sets the segmentation interval for an axis. It should be used with min and max to explicitly set tickings, but automatic calculation is recommended for most situations. This is unavailable for 'category' and 'time' axes. For logarithmic axes (type: 'log'), the logged value should be passed.

data option for category axes

The data option is an Array used for category axes (type: 'category'). If type is 'category' but data is not specified, it will be auto-collected from series.data. Each item can be a string category name or an object with a value property (category name) and textStyle property (text styling for that category). Example: data: ['Monday', 'Tuesday', {value: 'Wednesday', textStyle: {fontSize: 20, color: 'red'}}].

Category axis data items with object format

Category axis data items can be objects with a value property (string name of the category) and a textStyle property (Object controlling text style for that specific category item).

Category data auto-collection limitation

When axis.data is auto-collected from series.data for category axes, only values appearing in series.data are collected. If series.data is empty, nothing will be collected.

nameGap default distance

The nameGap option defaults to 20 and specifies the gap between the axis name and axis line in 3D space (not screen pixels).

axis3D type options

The type option for axis3D accepts four values: 'value' for continuous numerical data, 'category' for discrete category data (requires data to be set through axis.data), 'time' for continuous timing data with time formatting and scale calculation, and 'log' for logarithmic data.

axis3D min option special values

The min option defaults to null and can be set to a special value 'dataMin' to set the minimum value to the minimum label. It will be automatically computed when not set. For category axes, it can be set as an ordinal number (e.g., 2 for the third category) or a negative number (e.g., -3).

axis3D max option special values

The max option defaults to null and can be set to a special value 'dataMax' to set the maximum value to the maximum label. It will be automatically computed when not set. For category axes, it can be set as an ordinal number (e.g., 2 for the third category) or a negative number (e.g., -3).

scale option for value axes

The scale option defaults to false and is only available for numerical axes (type: 'value'). When set to true, the axis may not contain the zero position, which is useful for scatter charts with both value axes. This configuration is unavailable when min and max are set.

splitNumber recommendation

The splitNumber option defaults to 5 and specifies the number of segments the axis is split into. The value serves only as a recommendation; the true segments may be adjusted based on readability. This is unavailable for category axes.

minInterval default and usage

The minInterval option defaults to 0 and specifies the minimum gap between split lines. For example, setting it to 1 ensures axis labels are shown as integers. It is available only for axes of type 'value' or 'time'.

yAxis3D component for 3D cartesian coordinate system

The yAxis3D component represents the Y-axis in a 3D cartesian coordinate system. You can use the grid3DIndex option to reference a specific 3D cartesian coordinate system (grid3D) to associate the y-axis with it.

yAxis3D name option

The name option is a string that sets the display name of the y-axis. The default value is 'Y'.

yAxis3D configuration overrides grid3D settings

Configuration items set directly on yAxis3D will override the corresponding settings in grid3D. This applies to axisLine, axisTick, axisLabel, splitLine, splitArea, and axisPointer.

yAxis3D show option

The show option is a boolean that controls whether the y-axis is displayed. Default behavior is not explicitly specified.

3D coordinate system components available

Apache ECharts GL provides the following 3D coordinate system components: grid3D, xAxis3D, yAxis3D, zAxis3D, globe, geo3D, and mapbox3D.

calendar.yearLabel.formatter string templates

The yearLabel.formatter property supports string templates with variables: {nameMap} (default year range display), {start} (start year), {end} (end year). Example: formatter: '{start}-{end}'

calendar.yearLabel.formatter callback function

The yearLabel.formatter property accepts a callback function with parameter object containing: nameMap (default year range display), start (start year), end (end year). Example: formatter: function (param) { return param.end; }

calendar default positioning and size

The calendar component has default left position of 80 and default top position of 60. Width and height both default to 'auto'. These can be configured using left, right, top, bottom, width, and height properties to adapt the calendar to container size.

calendar.dayLabel.show default and behavior

The dayLabel.show property defaults to true. Set to false to hide day labels in the calendar coordinates.

calendar coordinate system overview

Calendar coordinates are used to create calendar charts in ECharts. They can be combined with heatmap, scatter, effectScatter, and graph series types. Calendar coordinate system can be placed horizontally or vertically, and can be configured to adapt to container size.

calendar.range configuration format

The range property is required and specifies the date range for the calendar. It supports multiple formats: a single year (e.g., 2017), a single month (e.g., '2017-02'), or an array of two dates (e.g., ['2017-01-02', '2017-02-23']). When month-only values are provided in an array, they are converted to the first day of the month (e.g., ['2017-01', '2017-02'] becomes ['2017-01-01', '2017-02-01']).

calendar.cellSize default and options

The cellSize property controls the size of each rectangle in the calendar coordinates. Default value is 20. It can be set as a single number (e.g., 20) or an array where the first element is width and the second is height (e.g., [20, 40]). It supports 'auto' for self-adaptation: cellSize: 'auto' sets both width and height to auto; cellSize: [40] sets width and height to auto with 40 as a reference; cellSize: ['auto', 40] sets width to auto and height to 40.

calendar.width and calendar.height behavior

Both width and height default to 'auto'. When width is set, cellSize[0] is forced to 'auto'. When height is set, cellSize[1] is forced to 'auto'. These properties allow the calendar to adapt to container size.

calendar.orient values

The orient property controls the layout direction of the calendar. Default is 'horizontal'. Options are 'horizontal' and 'vertical'. Horizontal is used by convention for heatmap calendars; vertical layout can help when wider cell sizes make the total width too wide.

calendar.splitLine configuration

The splitLine property has a show option (boolean, default true) and a lineStyle object. The lineStyle accepts color (default '#000'), width (default 1), and type (default 'solid') properties. Example: calendar: [{splitLine: {show: true, lineStyle: {color: '#000', width: 1, type: 'solid'}}}]

calendar.itemStyle default values

The itemStyle property controls the style of every rectangle in the calendar coordinates. Default color is '#fff', borderWidth is 1, and borderColor is '#ccc'. Example: calendar: [{itemStyle: {color: '#fff', borderWidth: 1, borderColor: '#ccc'}}]

calendar.dayLabel.firstDay configuration

The firstDay property in dayLabel controls which day starts the week, with values 0-6. Default is 0 (Sunday). Setting firstDay: 1 starts the week on Monday. Example: calendar: [{dayLabel: {firstDay: 1}}]

calendar.dayLabel.margin default

The margin property in dayLabel controls the space between the day label and the axis line. Default value is 0.

calendar.dayLabel.position values

The position property in dayLabel accepts 'start' (default) or 'end', controlling whether the day label appears at the beginning or end of the date range.

calendar.dayLabel.nameMap locale and customization

The nameMap property in dayLabel specifies the day names. Defaults to 'en'. Before v5.2.2, it supports 'en' (English) and 'cn' (Chinese). Since v5.2.2, it defaults to the specified locale when initializing charts and supports 'EN' (English), 'ZH' (Chinese), and any registered locale names (case-sensitive). Can also be customized as an array where index 0 is Sunday. Example: nameMap: ['S', '一', 'T', '三', '', '五', 'S']

calendar.monthLabel.show default

The monthLabel.show property defaults to true. Set to false to hide month labels in the calendar coordinates.

calendar.monthLabel.align default

The align property in monthLabel controls the position of month text within each month interval. Default is 'center'. Options are 'center' and 'left'.

calendar.monthLabel.margin default

The margin property in monthLabel controls the space between the month label and the axis line. Default value is 5.

calendar.monthLabel.position values

The position property in monthLabel accepts 'start' (default) or 'end', controlling whether the month label appears at the beginning or end of the calendar.

calendar.monthLabel.nameMap locale and customization

The nameMap property in monthLabel specifies the month names. Defaults to 'en'. Before v5.2.2, it supports 'en' (English) and 'cn' (Chinese). Since v5.2.2, it defaults to the specified locale when initializing charts and supports 'EN' (English), 'ZH' (Chinese), and any registered locale names (case-sensitive). The index 0 always represents January. Can be customized as an array of month names in any language or with empty strings to hide specific months. Example: nameMap: ['一月', 'Feb', '三月', '四月', 'May', '六月', 'Июль', '八月', '', '十月', 'Nov', '十二月']

calendar.monthLabel.formatter string templates

The monthLabel.formatter property supports string templates with variables: {nameMap} (default month name), {yyyy} (four-digit year), {yy} (two-digit year), {MM} (two-digit month), {M} (single-digit month). Example: formatter: '{yyyy}-{MM}'

calendar.monthLabel.formatter callback function

The monthLabel.formatter property accepts a callback function with parameter object containing: nameMap (default month name), yyyy (four-digit year), yy (two-digit year), MM (two-digit month), M (single-digit month). Example: formatter: function (param) { return param.MM; }

calendar.yearLabel.show default

The yearLabel.show property defaults to true. Set to false to hide the year label in the calendar coordinates.

calendar.yearLabel.margin default

The margin property in yearLabel controls the space between the year label and the axis line. Default value is 30.

calendar.yearLabel.position default behavior

The position property in yearLabel controls the placement of the year label. When orient is 'horizontal', the default position is 'left'. When orient is 'vertical', the default position is 'top'. Options are 'top', 'bottom', 'left', 'right'.

calendar.yearLabel.formatter default behavior

By default, the yearLabel.formatter displays the current range of years. If the date range crosses year boundaries, it shows both the first and last year.

Polar coordinate system

Polar coordinates can be used in scatter and line charts. Every polar coordinate has an angleAxis and a radiusAxis.

Polar as component

Polar is a component object type in ECharts configuration that defines a polar coordinate system for visualizing data in angular and radial dimensions.

Polar coordinate series types

Scatter and line charts can use polar coordinates for visualization.

encode object structure in formatter params

The encode property is an Object where keys are coordinate system dimension names (such as 'x', 'y', 'radius', 'angle') and values are arrays containing dimension indices. For example, {x: [2], y: [0]} means dimension index 2 maps to the x-axis and dimension index 0 maps to the y-axis. The value must always be an array, never null or undefined.

coordinateSystem 'cartesian2d' option details

When coordinateSystem is set to 'cartesian2d', the series or component is laid out based on a two-dimensional rectangular coordinate system (Cartesian coordinate system) using a grid. When multiple xAxis or multiple yAxis exist within an ECharts instance, the corresponding axes must be specified using xAxisIndex, yAxisIndex, xAxisId, or yAxisId. Some commonly used series like line and bar cannot be laid out directly on matrix or calendar coordinate systems, but can be laid out on a grid, and that grid can then be laid out on matrix or calendar.

coordinateSystem 'polar' option details

When coordinateSystem is set to 'polar', the series or component is laid out based on a polar coordinate system. When multiple polar coordinate systems exist within an ECharts instance, the corresponding system must be specified using polarIndex or polarId.

coordinateSystem 'geo' option details

When coordinateSystem is set to 'geo', the series or component is laid out based on a geographic coordinate system. When multiple geographic coordinate systems exist within an ECharts instance, the corresponding system must be specified using geoIndex or geoId.

coordinateSystem 'singleAxis' option details

When coordinateSystem is set to 'singleAxis', the series or component is laid out based on a single-axis coordinate system. When multiple singleAxis coordinate systems exist within an ECharts instance, the corresponding system must be specified using singleAxisIndex or singleAxisId.

coordinateSystem 'parallel' option details

When coordinateSystem is set to 'parallel', the series or component is laid out based on a parallel coordinate system. When multiple parallel coordinate systems exist within an ECharts instance, the corresponding system must be specified using parallelIndex or parallelId.

coordinateSystem 'calendar' option details

When coordinateSystem is set to 'calendar', the series or component is laid out based on a calendar coordinate system. When multiple calendar coordinate systems exist within an ECharts instance, the corresponding system must be specified using calendarIndex or calendarId.

Give your agent this brain