echarts-instance/data

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

appendData method for incremental rendering

appendData(opts: {seriesIndex?: number, data?: Array|TypedArray}) => string. Used for rendering millions of data in scenarios with 10-100 MB data sizes. Appends data incrementally without clearing already-rendered graphic elements. Restrictions: not supported when series uses dataset; only series types scatter, lines (pure echarts) and scatterGL, linesGL, polygons3D (echarts-gl) support incremental rendering.

Two-dimensional data array format

Data is typically represented by a two-dimensional array where each column is named a dimension. Example: series: [{ data: [[3.4, 4.5, 15, 43], [4.2, 2.3, 20, 91], [10.8, 9.5, 30, 18], [7.2, 8.8, 18, 57]] }]. In cartesian (grid), dimX and dimY correspond to xAxis and yAxis respectively. In polar, dimX and dimY correspond to radiusAxis and angleAxis respectively.

One-dimensional data array with category axis

When there is exactly one category axis (axis.type is 'category'), data can be represented by a one-dimensional array. Each item corresponds to each item in xAxis.data. For example: xAxis: { data: ['a', 'b', 'm', 'n'] }, series: [{ data: [23, 44, 55, 19] }]. This is a simplification of the format [[0, 23], [1, 44], [2, 55], [3, 19]].

Data values for value axis (number or string format)

When a dimension corresponds to a value axis (axis.type is 'value' or 'log'), the value can be a number like 12, or a number in string format like '12'.

Data values for category axis

When a dimension corresponds to a category axis (axis.type is 'category'), the value should be either the ordinal of axis.data (based on 0) or the string value from axis.data. For example, with xAxis data ['Monday', 'Tuesday', 'Wednesday', 'Thursday'], a data point can use 0 for 'Monday' or 'Thursday' for the Thursday category.

Data values for time axis formats

When a dimension corresponds to a time axis (type is 'time'), the value can be: a timestamp like 1484141700832 representing UTC time; ISO 8601 date strings (all treated as local time unless timezone specified) like '2012-03', '2012-03-01', '2012-03-01 05:06', '2012-03-01T12:22:33.123', or with timezone like '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000'; other date formats like '2012', '2012-3-1', '2012/3/1', '2009/6/12 2:00', '2009/6/12 2:05:08.123'; or a JavaScript Date instance created by the user.

Customize individual data item with object format

A data item can be customized by setting it as an object with a 'value' property for the real value, plus optional properties like 'label' and 'itemStyle' that only apply to that specific data item. Example: { value: [24, 32], label: {}, itemStyle: {} }.

Empty value representations in data

Empty values (indicating a data item does not exist, which is different from a value of 0) can be represented using '-', null, undefined, or NaN. For example, a line chart can break when encountering an empty value, and a scatter chart does not display graphic elements for empty values.

Other dimensions usage in data

Other dimensions in data (beyond the first two mapped to axes) are optional and can be used in various places: visualMap can map one or more dimensions to visual properties (color, symbol size); series.symbolSize can be set as a callback function where symbol size is calculated from values of a certain dimension; values in other dimensions can be shown by tooltip.formatter or series.label.formatter.

data.id usage priority when no ID is assigned

When no ID is explicitly assigned to a data item, ECharts uses a fallback priority: first the name field is used as ID; if name doesn't exist, then the index of the data item is used as ID.

data.id field is optional

The ID field for a data item is optional. If provided, it should be identical (unique) for each data item.

v5 removes built-in geoJSON

ECharts v5 removes the built-in geoJSON that was previously in the echarts/map folder. Users needing these files can obtain them from v4, or find appropriate geospatial data and register it with ECharts using the registerMap interface.

appendData method signature and parameters

appendData(opts: {seriesIndex?: number, data?: Array|TypedArray}) => string adds data to a series for incremental rendering in large dataset scenarios (millions of data points). Supports chunked/paged data loading without clearing existing rendered data.

appendData limitations

appendData does not support series using dataset simultaneously; only works with series.data. Currently supported series for incremental rendering: scatter and lines (ECharts base), scatterGL, lines3D, and polygons3D (ECharts GL).

Give your agent this brain