from ipywidgets import (
Widget, DOMWidget, widget_serialization, register
)
from ipywidgets.widgets.trait_types import TypedTuple
from traitlets import (
Unicode, Int, CInt, Instance, ForwardDeclaredInstance, This, Enum,
Tuple, List, Dict, Float, CFloat, Bool, Union, Any,
)
from ..basewidget import BaseWidget
[docs]
class Custom(BaseWidget):
"""
:warning: **Autogenerated class**
**custom series**
`custom series` supports customizing graphic elements, and then generate more types of charts.
echarts manages the creation, deletion, animation and interaction with other components (like [dataZoom](#dataZoom)、[visualMap](#visualMap)), which frees developers from handling those issue themselves.
**For example, a "x-range" chart is made by custom sereis:**
**[More samples of custom series](https://echarts.apache.org/examples/en/index.html#chart-type-custom)**
**[A tutotial of custom series](tutorial.html#Custom%20Series)**
**Customize the render logic (in renderItem method)**
`custom series` requires developers to write a render logic by themselves. This render logic is called [renderItem](#series-custom.renderItem).
For example:
```
var option = {
...,
series: [{
type: 'custom',
renderItem: function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style()
};
},
data: data
}]
}
```
[renderItem](#series-custom.renderItem) will be called on each data item.
[renderItem](#series-custom.renderItem) provides two parameters:
- [params](#series-custom.renderItem.arguments.params): provides info about the current series and data and coordinate system.
- [api](#series-custom.renderItem.arguments.api): includes some methods.
[renderItem](#series-custom.renderItem) method should returns graphic elements definitions.See [renderItem.return](#series-custom.renderItem.return).
Generally, the main process of [renderItem](#series-custom.renderItem) is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in [renderItem.arguments.api](#series-custom.renderItem.arguments.api) are always used in this procedure:
- [api.value(...)](#series-custom.renderItem.arguments.api.value) is used to retrieve value from data. For example, `api.value(0)` retrieve the value of the first dimension in the current data item.
- [api.coord(...)](#series-custom.renderItem.arguments.api.coord) is used to convert data to coordinate. For example, `var point = api.coord([api.value(0), api.value(1)])` converet the data to the point on the current coordinate system.
Sometimes [api.size(...)](#series-custom.renderItem.arguments.api.size) method is needed, which calculates the size on the coordinate system by a given data range.
Moreover, [api.style(...)](#series-custom.renderItem.arguments.api.style) method can be used to set style. It provides not only the style settings specified in [series.itemStyle](#series-custom.itemStyle), but also the result of visual mapping. This method can also be called like `api.style({fill: 'green', stroke: 'yellow'})` to override those style settings.
**Dimension mapping (by encode and dimension option)**
In most cases, [series.encode](#series-custom.encode) needs to be specified when using `custom series` series, which indicate the mapping of dimensions, and then echarts can render appropriate axis by the extent of those data.
`encode.tooltip` and `encode.label` can also be specified to define the content of default `tooltip` and `label`.
[series.dimensions](#series-custom.dimensions) can also be specified to defined names of each dimensions, which will be displayed in tooltip.
For example:
```
series: {
type: 'custom',
renderItem: function () {
...
},
encode: {
x: [2, 4, 3],
y: 1,
label: 0,
tooltip: [2, 4, 3]
}
}
```
**Controlled by dataZoom**
When use `custom series` with [dataZoom](#dataZoom), [dataZoom.filterMode](#dataZoom.filterMode) usually be set as `'weakFilter'`, which prevent `dataItem` from being filtered when only part of its dimensions are out of the current data window.
**Difference between `dataIndex` and `dataIndexInside`**
- `dataIndex` is the index of a `dataItem` in the original data.
- `dataIndexInside` is the index of a `dataItem` in the current data window (see [dataZoom](#dataZoom).
[renderItem.arguments.api](#series-custom.renderItem.arguments.api) uses `dataIndexInside` as the input parameter but not `dataIndex`, because conversion from `dataIndex` to `dataIndexInside` is time-consuming.
**Event listener**
```
chart.setOption({
// ...
series: {
type: 'custom',
renderItem: function () {
// ...
return {
type: 'group',
children: [{
type: 'circle'
// ...
}, {
type: 'circle',
name: 'aaa',
// User specified info, available
// in event handler.
info: 12345,
// ...
}]
};
}
}
});
chart.on('click', {element: 'aaa'}, function (params) {
// When the element with name 'aaa' clicked,
// this method called.
console.log(params.info);
});
```
"""
def __init__(self, **kwargs):
super().__init__(**kwargs)
_model_name = Unicode("CustomModel").tag(sync=True)
type = Unicode("custom", allow_none=True, ).tag(sync=True)
id = Unicode(None, allow_none=True, help="""Component ID, not specified by default. If specified, it can be used to refer the component in option or API.""").tag(sync=True)
name = Unicode(None, allow_none=True, help="""Series name used for displaying in [tooltip](#tooltip) and filtering with [legend](#legend), or updating data and configuration with `setOption`.""").tag(sync=True)
colorBy = Unicode(None, allow_none=True, help="""> Since `v5.2.0`
The policy to take color from [option.color](#color). Valid values:
* `'series'`: assigns the colors in the palette by series, so that all data in the same series are in the same color;
* `'data'`: assigns colors in the palette according to data items, with each data item using a different color.""").tag(sync=True)
legendHoverLink = Bool(None, allow_none=True, help="""Whether to enable highlighting chart when [legend](#legend) is being hovered.""").tag(sync=True)
coordinateSystem = Unicode(None, allow_none=True, help="""The coordinate used in the series, whose options are:
* `null` or `'none'`
No coordinate.
* `'cartesian2d'`
Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with [xAxisIndex](#series-custom.xAxisIndex) and [yAxisIndex](#series-custom.yAxisIndex) to assign the corresponding axis component.
* `'polar'`
Use polar coordinates, with [polarIndex](#series-custom.polarIndex) to assign the corresponding polar coordinate component.
* `'geo'`
Use geographic coordinate, with [geoIndex](#series-custom.geoIndex) to assign the corresponding geographic coordinate components.
* `'calendar'`
Use calendar coordinates, with [calendarIndex](#series-custom.calendarIndex) to assign the corresponding calendar coordinate components.
* `'none'`
Do not use coordinate system.""").tag(sync=True)
xAxisIndex = Float(None, allow_none=True, help="""Index of [x axis](#xAxis) to combine with, which is useful for multiple x axes in one chart.""").tag(sync=True)
yAxisIndex = Float(None, allow_none=True, help="""Index of [y axis](#yAxis) to combine with, which is useful for multiple y axes in one chart.""").tag(sync=True)
polarIndex = Float(None, allow_none=True, help="""Index of [polar coordinate](#polar) to combine with, which is useful for multiple polar axes in one chart.""").tag(sync=True)
geoIndex = Float(None, allow_none=True, help="""Index of [geographic coordinate](#geo) to combine with, which is useful for multiple geographic axes in one chart.""").tag(sync=True)
calendarIndex = Float(None, allow_none=True, help="""Index of [calendar coordinates](#calendar) to combine with, which is useful for multiple calendar coordinates in one chart.""").tag(sync=True)
renderItem = Any(None, allow_none=True, help="""`custom series` requires developers to write a render logic by themselves. This render logic is called [renderItem](#series-custom.renderItem).
For example:
```
var option = {
...,
series: [{
type: 'custom',
renderItem: function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style()
};
},
data: data
}]
}
```
[renderItem](#series-custom.renderItem) will be called on each data item.
[renderItem](#series-custom.renderItem) provides two parameters:
* [params](#series-custom.renderItem.arguments.params): provides info about the current series and data and coordinate system.
* [api](#series-custom.renderItem.arguments.api): includes some methods.
[renderItem](#series-custom.renderItem) method should returns graphic elements definitions.See [renderItem.return](#series-custom.renderItem.return).
Generally, the main process of [renderItem](#series-custom.renderItem) is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in [renderItem.arguments.api](#series-custom.renderItem.arguments.api) are always used in this procedure:
* [api.value(...)](#series-custom.renderItem.arguments.api.value) is used to retrieve value from data. For example, `api.value(0)` retrieve the value of the first dimension in the current data item.
* [api.coord(...)](#series-custom.renderItem.arguments.api.coord) is used to convert data to coordinate. For example, `var point = api.coord([api.value(0), api.value(1)])` converet the data to the point on the current coordinate system.
Sometimes [api.size(...)](#series-custom.renderItem.arguments.api.size) method is needed, which calculates the size on the coordinate system by a given data range.
Moreover, [api.style(...)](#series-custom.renderItem.arguments.api.style) method can be used to set style. It provides not only the style settings specified in [series.itemStyle](#series-custom.itemStyle), but also the result of visual mapping. This method can also be called like `api.style({fill: 'green', stroke: 'yellow'})` to override those style settings.""").tag(sync=True)
itemStyle = Dict(default_value=None, allow_none=True, help="""Graphic style of , `emphasis` is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.""").tag(sync=True)
labelLine = Dict(default_value=None, allow_none=True, help="""> Since `v5.0.0`
Configuration of label guide line.""").tag(sync=True)
labelLayout = Union([Any(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""> Since `v5.0.0`
Unified layout configuration of labels.
It provide a chance to adjust the labels' `(x, y)` position, alignment based on the original layout each series provides.
This option can be a callback with following parameters.
```
// corresponding index of data
dataIndex: number
// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'
dataType?: string
// corresponding index of series
seriesIndex: number
// Displayed text of label.
text: string
// Bounding rectangle of label.
labelRect: {x: number, y: number, width: number, height: number}
// Horizontal alignment of label.
align: 'left' | 'center' | 'right'
// Vertical alignment of label.
verticalAlign: 'top' | 'middle' | 'bottom'
// Bounding rectangle of the element corresponding to.
rect: {x: number, y: number, width: number, height: number}
// Default points array of labelLine. Currently only provided in pie and funnel series.
// It's null in other series.
labelLinePoints?: number[][]
```
**Example:**
Align the labels on the right. Left 10px margin to the edge.
```
labelLayout(params) {
return {
x: params.rect.x + 10,
y: params.rect.y + params.rect.height / 2,
verticalAlign: 'middle',
align: 'left'
}
}
```
Set the text size based on the size of element bounding rectangle.
```
labelLayout(params) {
return {
fontSize: Math.max(params.rect.width / 10, 5)
};
}
```""").tag(sync=True)
selectedMode = Union([Bool(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""> Since `v5.0.0`
Selected mode. It is disabled by default, and you may set it to be `true` to enable it.
Besides, it can be set to `'single'`, `'multiple'` or `'series'`, for single selection, multiple selections and whole series selection.
> `'series'` is supported since v5.3.0""").tag(sync=True)
dimensions = Any(None, allow_none=True, help="""`dimensions` can be used to define dimension info for `series.data` or `dataset.source`.
Notice: if [dataset](#dataset) is used, we can definite dimensions in [dataset.dimensions](#dataset.dimensions), or provide dimension names in the first column/row of [dataset.source](#dataset.source), and not need to specify `dimensions` here. But if `dimensions` is specified here, it will be used despite the dimension definitions in dataset.
For example:
```
option = {
dataset: {
source: [
// 'date', 'open', 'close', 'highest', 'lowest'
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
},
series: {
type: 'xxx',
// Specify name for each dimensions, which will be displayed in tooltip.
dimensions: ['date', 'open', 'close', 'highest', 'lowest']
}
}
```
```
series: {
type: 'xxx',
dimensions: [
null, // If you do not intent to defined this dimension, use null is fine.
{type: 'ordinal'}, // Specify type of this dimension.
// 'ordinal' is always used in string.
// If type is not specified, echarts will guess type by data.
{name: 'good', type: 'number'},
'bad' // Equals to {name: 'bad'}.
]
}
```
Each data item of `dimensions` can be:
* `string`, for example, `'someName'`, which equals to `{name: 'someName'}`.
* `Object`, where the attributes can be:
+ name: `string`.
+ type: `string`, supports:
- `number`
- `float`, that is, [Float64Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array)
- `int`, that is, [Int32Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array)
- `ordinal`, discrete value, which represents string generally.
- `time`, time value, see [data](#series.data) to check the format of time value.
+ displayName: `string`, generally used in tooltip for dimension display. If not specified, use `name` by default.
When `dimensions` is specified, the default `tooltip` will be displayed vertically, which is better to show dimension names. Otherwise, `tooltip` will displayed only value horizontally.""").tag(sync=True)
encode = Dict(default_value=None, allow_none=True, help="""Define what is encoded to for each dimension of `data`. For example:
```
option = {
dataset: {
source: [
// Each column is called a dimension.
// There are five dimensions: 0, 1, 2, 3, 4.
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
},
series: {
type: 'xxx',
encode: {
x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.
y: 2, // Dimension 2 is mapped to y axis.
tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.
}
}
}
```
When [dimensions](#series.dimensions) is used to defined name for a certain dimension, `encode` can refer the name directly. For example:
```
series: {
type: 'xxx',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
encode: {
x: 'date',
y: ['open', 'close', 'highest', 'lowest']
}
}
```
The basic structure of [encode](option.html#series.encode) is illustrated as follows, where the left part of colon is the name of axis like `'x'`, `'y'`, `'radius'`, `'angle'` or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.
The properties available in `encode` listed as follows:
```
// In any of the series and coordinate systems,
// these properties are available:
encode: {
// Display dimension "product" and "score" in the tooltip.
tooltip: ['product', 'score']
// Set the series name as the concat of the names of dimensions[1] and dimensions[3].
// (sometimes the dimension names are too long to type in series.name manually).
seriesName: [1, 3],
// Using dimensions[2] as the id of each data item. This is useful when dynamically
// update data by `chart.setOption()`, where the new and old data item can be
// corresponded by id, by which the appropriate animation can be performed when updating.
itemId: 2,
// Using dimensions[3] as the name of each data item. This is useful in charts like
// 'pie', 'funnel', where data item name can be displayed in legend.
itemName: 3,
// Using dimensions[4] as the group ID for each data item. With universalTransition enabled,
// the data items from the old option and those from the new one, if sharing a same group ID,
// will then be matched and applied to a proper animation after `setOption` is called.
itemGroupId: 4,
// Using dimension[5] as the child group ID for each data item. This option is introduced to
// make multiple levels drilldown and aggregation animation come true. See childGroupId for more.
// Since v5.5.0
itemChildGroupId: 5
}
// These properties only work in cartesian(grid) coordinate system:
encode: {
// Map dimensions[1], dimensions[5] and dimension "score" to the X axis.
x: [1, 5, 'score'],
// Map dimensions[0] to the Y axis.
y: 0
}
// These properties only work in polar coordinate system:
encode: {
radius: 3,
angle: 2,
...
}
// These properties only work in geo coordinate system:
encode: {
lng: 3,
lat: 2
}
// For some type of series that are not in any coordinate system,
// like 'pie', 'funnel' etc.:
encode: {
value: 3
}
```
This is an [example](https://echarts.apache.org/examples/en/view.html?c=dataset-encode1&edit=1&reset=1) for `encode`.
Specially, in [custom series(~series-custom), some property in `encode`, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the [dataZoom](#dataZoom) on the axis will not filter the series.
```
var option = {
xAxis: {},
yAxis: {},
dataZoom: [{
xAxisIndex: 0
}, {
yAxisIndex: 0
}],
series: {
type: 'custom',
renderItem: function (params, api) {
return {
type: 'circle',
shape: {
cx: 100, // x position is always 100
cy: api.coord([0, api.value(0)])[1],
r: 30
},
style: {
fill: 'blue'
}
};
},
encode: {
// Then the series will not be controlled
// by x axis and corresponding dataZoom.
x: -1,
y: 1
},
data: [ ... ]
}
};
```""").tag(sync=True)
seriesLayoutBy = Unicode(None, allow_none=True, help="""When [dataset](#dataset) is used, `seriesLayoutBy` specifies whether the column or the row of `dataset` is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:
* 'column': by default, the columns of `dataset` are mapped the series. In this case, each column represents a dimension.
* 'row'：the rows of `dataset` are mapped to the series. In this case, each row represents a dimension.
Check this [example](https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by).""").tag(sync=True)
datasetIndex = Float(None, allow_none=True, help="""If [series.data](#series.data) is not specified, and [dataset](#dataset) exists, the series will use `dataset`. `datasetIndex` specifies which dataset will be used.""").tag(sync=True)
dataGroupId = Unicode(None, allow_none=True, help="""A group ID assigned to all data items in the series.
This option has a lower priority than `groupId`, which means when `groupId` is specified for a certain data item the `dataGroupId` will be simply ignored for that data item. For more information, please see `series.data.groupId`.""").tag(sync=True)
data = Any(None, allow_none=True, help="""Data array of series, which can be in the following forms:
Notice, if no `data` specified in series, and there is [dataset](#dataset) in option, series will use the first [dataset](#dataset) as its datasource. If `data` has been specified, [dataset](#dataset) will not used.
`series.datasetIndex` can be used to specify other [dataset](#dataset).
Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".
```
series: [{
data: [
// dimX dimY other dimensions ...
[ 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)](#grid), "dimX" and "dimY" correspond to [xAxis](#xAxis) and [yAxis](#yAxis) respectively.
* In [polar](#polar) "dimX" and "dimY" correspond to [radiusAxis](#radiusAxis) and [angleAxis](#angleAxis) respectively.
* Other dimensions are optional, which can be used in other places. For example:
+ [visualMap](#visualMap) can map one or more dimensions to visual (color, symbol size ...).
+ [series.symbolSize](#series.symbolSize) can be set as a callback function, where symbol size can be calculated by values of a certain dimension.
+ Values in other dimensions can be shown by [tooltip.formatter](#tooltip.formatter) or [series.label.formatter](#series.label.formatter).
Especially, when there is one and only one category axis (axis.type is `'category'`), data can be simply be represented by a one-dimension array, like:
```
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// Each item corresponds to each item in xAxis.data.
data: [23, 44, 55, 19]
// In fact, it is the simplification of the format below:
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]
```
**Relationship between "value" and [axis.type](#xAxis.type)**
* When a dimension corresponds to a value axis (axis.type is `'value'` or `'log'`):
The value can be a `number` (like `12`) (can also be a number in a `string` format, like `'12'`).
* When a dimension corresponds to a category axis (axis.type is `'category'`):
The value should be the ordinal of the axis.data (based on `0`), the string value of the axis.data. For example:
```
xAxis: {
type: 'category',
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']
},
yAxis: {
type: 'category',
data: ['a', 'b', 'm', 'n', 'p', 'q']
},
series: [{
data: [
// xAxis yAxis
[ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.
[ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.
[ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.
[ 3, 3, 5 ]
]
}]
```
There is an example of double category axes: [Github Punchcard](https://echarts.apache.org/examples/en/editor.html?c=scatter-punchCard).
* When a dimension corresponds to a time axis (type is `'time'`), the value can be:
+ a timestamp, like `1484141700832`, which represents a UTC time.
+ a date string, in one of the formats below:
- a subset of [ISO 8601](https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15), only including (all of these are treated as local time unless timezone is specified, which is consistent with [moment](https://momentjs.com/)):
* only part of year/month/date/time are specified: `'2012-03'`, `'2012-03-01'`, `'2012-03-01 05'`, `'2012-03-01 05:06'`.
* separated by `"T"` or a space: `'2012-03-01T12:22:33.123'`, `'2012-03-01 12:22:33.123'`.
* timezone specified: `'2012-03-01T12:22:33Z'`, `'2012-03-01T12:22:33+8000'`, `'2012-03-01T12:22:33-05:00'`.
- other date string format (all of these are treated as local time):
`'2012'`, `'2012-3-1'`, `'2012/3/1'`, `'2012/03/01'`,
`'2009/6/12 2:00'`, `'2009/6/12 2:05:08'`, `'2009/6/12 2:05:08.123'`.
+ a JavaScript Date instance created by user:
- Caution, when using a data string to create a Date instance, [browser differences and inconsistencies](https://dygraphs.com/date-formats.html) should be considered.
- For example: In chrome, `new Date('2012-01-01')` is treated as a Jan 1st 2012 in UTC, while `new Date('2012-1-1')` and `new Date('2012/01/01')` are treated as Jan 1st 2012 in local timezone. In safari `new Date('2012-1-1')` is not supported.
- So if you intent to perform `new Date(dateString)`, it is strongly recommended to use a time parse library (e.g., [moment](https://momentjs.com/)), or use `echarts.time.parse`, or check [this](https://dygraphs.com/date-formats.html).
**Customize a data item:**
When needing to customize a data item, it can be set as an object, where property `value` represent real value. For example:
```
[
12,
24,
{
value: [24, 32],
// label style, only works in this data item.
label: {},
// item style, only works in this data item.
itemStyle:{}
},
33
]
// Or
[
[12, 332],
[24, 32],
{
value: [24, 32],
// label style, only works in this data item.
label: {},
// item style, only works in this data item.
itemStyle:{}
},
[33, 31]
]
```
**Empty value:**
`'-'` or `null` or `undefined` or `NaN` can be used to describe that a data item does not exist (ps：*not exist* does not means its value is `0`).
For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.""").tag(sync=True)
clip = Bool(None, allow_none=True, help="""> Since `v4.4.0`
If clip the overflow on the coordinate system. Clip results varies between series:
* Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
* Bar：Clip all the overflowed. With bar width kept.
* Line：Clip the overflowed line.
* Lines: Clip all the overflowed.
* Candlestick: Ignore the elements exceeds the coordinate system.
* PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
* Custom: Clip all the olverflowed.
All these series have default value `true` except pictorialBar and custom series. Set it to `false` if you don't want to clip.""").tag(sync=True)
zlevel = Float(None, allow_none=True, help="""`zlevel` value of all graphical elements in custom series.
`zlevel` is used to make layers with Canvas. Graphical elements with different `zlevel` values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate `zlevel`. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.
Canvases with bigger `zlevel` will be placed on Canvases with smaller `zlevel`.""").tag(sync=True)
z = Float(None, allow_none=True, help="""`z` value of all graphical elements in custom series, which controls order of drawing graphical components. Components with smaller `z` values may be overwritten by those with larger `z` values.
`z` has a lower priority to `zlevel`, and will not create new Canvas.""").tag(sync=True)
silent = Bool(None, allow_none=True, help="""Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.""").tag(sync=True)
animation = Bool(None, allow_none=True, help="""Whether to enable animation.""").tag(sync=True)
animationThreshold = Float(None, allow_none=True, help="""Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.""").tag(sync=True)
animationDuration = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Duration of the first animation, which supports callback function for different data to have different animation effect:
```
animationDuration: function (idx) {
// delay for later data is larger
return idx * 100;
}
```""").tag(sync=True)
animationEasing = Unicode(None, allow_none=True, help="""Easing method used for the first animation. Varied easing effects can be found at [easing effect example](https://echarts.apache.org/examples/en/editor.html?c=line-easing).""").tag(sync=True)
animationDelay = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Delay before updating the first animation, which supports callback function for different data to have different animation effect.
For example:
```
animationDelay: function (idx) {
// delay for later data is larger
return idx * 100;
}
```
See [this example](https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay) for more information.""").tag(sync=True)
animationDurationUpdate = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Time for animation to complete, which supports callback function for different data to have different animation effect:
```
animationDurationUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
```""").tag(sync=True)
animationEasingUpdate = Unicode(None, allow_none=True, help="""Easing method used for animation.""").tag(sync=True)
animationDelayUpdate = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Delay before updating animation, which supports callback function for different data to have different animation effects.
For example:
```
animationDelayUpdate: function (idx) {
// delay for later data is larger
return idx * 100;
}
```
See [this example](https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay) for more information.""").tag(sync=True)
universalTransition = Any(None, allow_none=True, help="""> Since `v5.2.0`
Configuration related to universal transition animation.
Universal Transition provides the ability to morph between any series. With this feature enabled, each time `setOption`, transitions between series with the same `id` will be automatically associated with each other.
One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' `groupId` and `childGroupId`.
This can be enabled directly by configuring `universalTransition: true` in the series. It is also possible to provide an object for more detailed configuration.""").tag(sync=True)
tooltip = Dict(default_value=None, allow_none=True, help="""tooltip settings in this series.""").tag(sync=True)