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


class Geo(BaseWidget):
    """ 
:warning: **Autogenerated class**

Geographic coordinate system component.

Geographic coordinate system component is used to draw maps, which also supports [scatter series](#series-scatter), and [line series](#series-lines).

From `3.1.10`, geo component also supports mouse events, whose parameters are:

```
{
    componentType: 'geo',
    // geo component's index in option
    geoIndex: number,
    // name of clicking area, e.g., Shanghai
    name: string,
    // clicking region object as input, see geo.regions
    region: Object
}
```

**Tip:**
The region color can also be controlled by map series. See [series-map.geoIndex](#series-map.geoIndex).
    """

    def __init__(self, **kwargs):

        super().__init__(**kwargs)  
    
    _model_name = Unicode("GeoModel").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)
    
    show = Bool(None, allow_none=True, help="""Whether to show the geo component.""").tag(sync=True)
    
    map = Unicode(None, allow_none=True, help="""Map name registered in [registerMap](api.html#echarts.registerMap).

**Use geoJSON**

```
$.get('map/china_geo.json', function (chinaJson) {
    echarts.registerMap('china', {geoJSON: geoJson});
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        geo: [{
            map: 'china',
            ...
        }]
    });
});
```

See also [geoJSON hexbin](https://echarts.apache.org/examples/en/editor.html?c=custom-hexbin).

The demo above shows that ECharts can uses [geoJSON](http://geojson.org/) format as map outline. You can use third-party [geoJSON](http://geojson.org/) data (like [maps](https://github.com/echarts-maps)) and register them into ECharts.

**Use SVG**

```
$.get('map/topographic_map.svg', function (svg) {
    echarts.registerMap('topo', {svg: svg});
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        geo: [{
            map: 'topo',
            ...
        }]
    });
});
```

See also [Flight Seatmap](https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight).

The demo above shows that SVG format can be used in ECharts. See more info in [SVG Base Map](https://echarts.apache.org/handbook/en/how-to/component-types/geo/svg-base-map).""").tag(sync=True)
    
    projection = Dict(default_value=None, allow_none=True, help="""Since `v5.3.0`

For custom map projection, at least two methods `project`, `unproject` should be provided to calculate the coordinates after projection and before projection respectively.

For example, for the Mercator projection.

```
series: {
    type: 'map',
    projection: {
        project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
        unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
    }
}
```

In addition to our own implementation of the projection formula, we can also use exists projection implementations provided by third-party libraries such as [d3-geo](https://github.com/d3/d3-geo).

```
const projection = d3.geoConicEqualArea();
// ...
series: {
    type: 'map',
    projection: {
        project: (point) => projection(point),
        unproject: (point) => projection.invert(point)
    }
}
```

Note: Custom projections are only useful when using `GeoJSON` as a data source.""").tag(sync=True)
    
    center = Any(None, allow_none=True, help="""`center` specifies which point on the source map should be placed at the center of the viewport (i.e., typically, the center of the canvas).

`center` is typically used in control or fetch the position of source map when [roamming](#geo.roam) is performed. When roaming, the values in `center` and [zoom](#geo.zoom) will be modified correspondingly.

Notice: the values in `center` are based on the original layout coordinates, rather than the viewport (canvas) coordinates. If you intend to adjust the position and size of source map by viewport coordinates, use [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height) or [geo.layoutCenter](#geo.layoutCenter) / [layoutSize](#geo.layoutSize).

`center` is in longitude and latitude by default. Use the projected coordinates if [proejction](#geo.projection) is set.

Example:

```
// Place this [lng, lat] at the center of the viewport (canvas).
center: [115.97, 29.71]
```

```
projection: {
    projection: (pt) => project(pt)
},
center: project([115.97, 29.71])
```

A percentage string can also be used in `center`, like `'30%'`, based on the bounding rect(determined min/max latitude/longitude, or min/max projected coordinates if [proejction](#geo.projection) is set). You can use `'0%'` to place the top or left of bounding rect to the center of the viewport (typically, canvas), or use `'100%'` to place the right or bottom to the center of the viewport, or use `'50%'` to place the entire source map at the the center of the viewport.
For example:

```
center: [115, '30%']
// Place the top of source map to the center of the viewport (canvas)
center: [115, '0%']
// Place the left of source map to the center of the viewport (canvas)
center: ['0%', 13]
// Place the bottom of source map to the center of the viewport (canvas)
center: [115, '100%']
// Place the right of source map to the center of the viewport (canvas)
center: ['100%', 13]
// Place source map at center of the viewport (canvas)
center: ['50%', '50%']
```

> The percentage string is introduced since `v5.3.3`. It is initially based on canvas width/height. But that is not reasonable, and then changed to be based on the bounding rect since `v6.0.0`.

**See [geo roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/geo-roam-indicator&edit=1&reset=1)** to understand the concept.""").tag(sync=True)
    
    zoom = Float(None, allow_none=True, help="""Zoom rate of current viewport.

The value less than `1` indicates zooming out, while the value greater than `1` indicates zooming in.

When [roaming](#geo.roam), the values in [center](#geo.center) and `zoom` will be modified correspondingly.

**See [geo roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/geo-roam-indicator&edit=1&reset=1)** to understand the concept.""").tag(sync=True)
    
    scaleLimit = Dict(default_value=None, allow_none=True, help="""Limit of [zooming](#geo.roam), with `min` and `max`.

The value less than `1` indicates zooming out, while the value greater than `1` indicates zooming in.""").tag(sync=True)
    
    roam = Union([Bool(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Whether to enable mouse or touch roam (move and zoom). Optional values are:

* `false`: roam is disabled.
* `'scale'` or `'zoom'`: zoom only.
* `'move'` or `'pan'`: move (translation) only.
* `true`: both zoom and move (translation) are available.

When roaming, the values in [center](#geo.center) and [zoom](#geo.zoom) will be modified correspondingly.""").tag(sync=True)
    
    roamTrigger = Unicode(None, allow_none=True, help="""Since `v6.0.0`

[Roaming](#geo.roam) can be triggered by mouse dragging or mouse wheel.

Options:

* `'selfRect'`:

  The roaming can only be triggered on the bounding rect of the graphic elements.
* `'global'`:

  If `clip: true`, the roaming can only be triggered at any position within the clipped area. Otherwise it can be triggered in canvas globally.

**See [geo roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/geo-roam-indicator&edit=1&reset=1)** to understand the concept.""").tag(sync=True)
    
    aspectScale = Float(None, allow_none=True, help="""Used to scale aspect of geo. It will be ignored if [proejction](#geo.projection) is set.

The final calculated `pixelWidth` and `pixelHeight` of the map will satisfy `pixelWidth / pixelHeight = lngSpan / latSpan * aspectScale` (assume [proejction](#geo.projection) is not specified, and [preserveAspect](#geo.preserveAspect) is truthy).

If no [proejction](#geo.projection) is applied, the latitudes and longitudes in GeoJSON are linearly mapped to pixel coordinates diarectly. `aspectScale` offers a simple way to visually compensates for the distortion caused by the fact that the longitudinal spacing shrinks as latitude increases. For example, an `aspectScale` can be roughly calculated as `aspectScale = Math.cos(center_latitude * Maht.PI / 180)`, which is similar to a sinusoidal projection.

See [example](https://echarts.apache.org/examples/en/editor.html?c=geo-graph&edit=1&reset=1).""").tag(sync=True)
    
    boundingCoords = Any(None, allow_none=True, help="""Two dimension array. Define coord of left-top, right-bottom in layout box.

```
// A complete world map
map: 'world',
left: 0, top: 0, right: 0, bottom: 0,
boundingCoords: [
    // [lng, lat] of left-top corner
    [-180, 90],
    // [lng, lat] of right-bottom corner
    [180, -90]
],
```""").tag(sync=True)
    
    nameMap = Dict(default_value=None, allow_none=True, help="""Name mapping for customized areas. For example:

```
{
    'China' : '中国'
}
```""").tag(sync=True)
    
    nameProperty = Unicode(None, allow_none=True, help="""Since `v4.8.0`

customized property key for GeoJSON feature. By default, 'name' is used as primary key to identify GeoJSON feature.
For example:

```
{
    nameProperty: 'NAME', // key to connect following data point to GeoJSON region {"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}
    data:[
        {name: 'Alabama', value: 4822023},
        {name: 'Alaska', value: 731449},
    ]
}
```""").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="""Selected mode decides whether multiple selecting is supported. By default, `false` is used for disabling selection. Its value can also be `'single'` for selecting single area, or `'multiple'` for selecting multiple areas.""").tag(sync=True)
    
    label = Dict(default_value=None, allow_none=True, help="""Text label of , to explain some data information about graphic item like value, name and so on. `label` is placed under `itemStyle` in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, `label`is taken to be at the same level with `itemStyle`, and has `emphasis` as `itemStyle` does.""").tag(sync=True)
    
    itemStyle = Dict(default_value=None, allow_none=True, help="""Graphic style of Map Area Border, `emphasis` is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.""").tag(sync=True)
    
    emphasis = Dict(default_value=None, allow_none=True, help="""Map area style in highlighted state.""").tag(sync=True)
    
    select = Dict(default_value=None, allow_none=True, help="""Map area style in selected state.""").tag(sync=True)
    
    blur = Dict(default_value=None, allow_none=True, help="""Since `v5.1.0`

Map area style in blurred state.""").tag(sync=True)
    
    zlevel = Float(None, allow_none=True, help="""`zlevel` value of all graphical elements in .

`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 , 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)
    
    left = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between geo component and the left side of the container.

`left` can be a pixel value like `20`; it can also be a percentage value relative to the container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.

If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the component will be aligned automatically based on position.

> Note: If the graphic elements are unexpectedly distorted, see [preserveAspect](#geo.preserveAspect).

> Note: There are two rectangular layout approaches for geo. You can use either one:
>
> * [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height)
> * [geo.layoutCenter](#geo.layoutCenter) / [.layoutSize](#geo.layoutSize)""").tag(sync=True)
    
    top = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between geo component and the top side of the container.

`top` can be a pixel value like `20`; it can also be a percentage value relative to the container height like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.

If the `top` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the component will be aligned automatically based on position.

> Note: If the graphic elements are unexpectedly distorted, see [preserveAspect](#geo.preserveAspect).

> Note: There are two rectangular layout approaches for geo. You can use either one:
>
> * [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height)
> * [geo.layoutCenter](#geo.layoutCenter) / [.layoutSize](#geo.layoutSize)""").tag(sync=True)
    
    right = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between geo component and the right side of the container.

`right` can be a pixel value like `20`; it can also be a percentage value relative to the container width like `'20%'`.

Adaptive by default.

> Note: If the graphic elements are unexpectedly distorted, see [preserveAspect](#geo.preserveAspect).

> Note: There are two rectangular layout approaches for geo. You can use either one:
>
> * [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height)
> * [geo.layoutCenter](#geo.layoutCenter) / [.layoutSize](#geo.layoutSize)""").tag(sync=True)
    
    bottom = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Distance between geo component and the bottom side of the container.

`bottom` can be a pixel value like `20`; it can also be a percentage value relative to the container height like `'20%'`.

Adaptive by default.

> Note: If the graphic elements are unexpectedly distorted, see [preserveAspect](#geo.preserveAspect).

> Note: There are two rectangular layout approaches for geo. You can use either one:
>
> * [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height)
> * [geo.layoutCenter](#geo.layoutCenter) / [.layoutSize](#geo.layoutSize)""").tag(sync=True)
    
    width = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Width of geo component. Adaptive by default.

`width` can be a pixel value like `20`; it can also be a percentage value relative to the container width like `'20%'`.

> Note: If the graphic elements are unexpectedly distorted, see [preserveAspect](#geo.preserveAspect).""").tag(sync=True)
    
    height = Union([Unicode(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Height of geo component. Adaptive by default.

`height` can be a pixel value like `20`; it can also be a percentage value relative to the container height like `'20%'`.

> Note: If the graphic elements are unexpectedly distorted, see [preserveAspect](#geo.preserveAspect).""").tag(sync=True)
    
    layoutCenter = Any(None, allow_none=True, help="""`layoutCenter` and `layoutSize` can specify the rectangular area allocated to geo component, where `layoutCenter` defines the center position of the area, and `layoutSize` defines the size of the area. For example:

```
layoutCenter: ['30%', '30%'],
// If width-height ratio is larger than 1, then width is set to be 100.
// Otherwise, height is set to be 100.
// This makes sure that it will not exceed the area of 100x100
layoutSize: 100
```

After setting these two values, `left/right/top/bottom/width/height` becomes invalid.

> Note: There are two rectangular layout approaches for geo. You can use either one:
>
> * [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height)
> * [geo.layoutCenter](#geo.layoutCenter) / [.layoutSize](#geo.layoutSize)""").tag(sync=True)
    
    layoutSize = Union([Float(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Size of map, see [layoutCenter](geo.layoutCenter) for more information. Percentage relative to container width/height, and absolute pixel values are supported.

> Note: There are two rectangular layout approaches for geo. You can use either one:
>
> * [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height)
> * [geo.layoutCenter](#geo.layoutCenter) / [.layoutSize](#geo.layoutSize)""").tag(sync=True)
    
    preserveAspect = Union([Bool(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Since `v6.0.0`

`aspect ratio` here refers to `width / height`.

"preserve aspect" refers whether to preserve the `aspect ratio` of the original bounding rect of the content to be rendered.

A `rectangular area` allocated to `geo component` is determined by [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height) / [.aspectScale](#geo.aspectScale).

But the `aspect ratio` of this rectangle may not match that of the content's original bounding rect, which may cause distortion.

Options of `preserveAspect`:

* `null`/`undefined`/`false` (default): The original `aspect ratio` of the content will not be preserved, but stretched to fill the `geo component rectangular area`, which may cause distortion.
* `'contain'`/`true`: The original `aspect ratio` of the content is preserved; the bounding rect of the content are fully contained by the `geo component rectangular area`, and scaled up as much as possible to meet the `geo component rectangular area`. [preserveAspectAlign](#geo.preserveAspectAlign) and [preserveAspectVerticalAlign](#geo.preserveAspectVerticalAlign) can be used to adjust the position in this case.
* `'cover'`: The original `aspect ratio` of the content is preserved; the bounding rect of the content covers the `geo component rectangular area`, and scaled down as much as possible to meet the `geo component rectangular area`. [preserveAspectAlign](#geo.preserveAspectAlign) and [preserveAspectVerticalAlign](#geo.preserveAspectVerticalAlign) can be used to adjust the position in this case.

Notice: When using [layoutCenter](#geo.layoutCenter) and [layoutSize](#geo.layoutSize), the `aspect radio` is always preserved, regardless of this `preserveAspect`.

**See [geo roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/geo-roam-indicator&edit=1&reset=1)** to understand the concept.""").tag(sync=True)
    
    preserveAspectAlign = Unicode(None, allow_none=True, help="""Since `v6.0.0`

Options: `'left'` | `'right'` | `'center'`.

See [preserveAspect](#geo.preserveAspect).

**See [geo roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/geo-roam-indicator&edit=1&reset=1)** to understand the concept.""").tag(sync=True)
    
    preserveAspectVerticalAlign = Unicode(None, allow_none=True, help="""Since `v6.0.0`

Options: `'top'` | `'bottom'` | `'middle'`.

See [preserveAspect](#geo.preserveAspect).

**See [geo roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/geo-roam-indicator&edit=1&reset=1)** to understand the concept.""").tag(sync=True)
    
    clip = Bool(None, allow_none=True, help="""Since `v6.0.0`

A `rectangular area` allocated to `geo component` is determined by [geo.left](#geo.left) / [.right](#geo.right) / [.top](#geo.top) / [.bottom](#geo.bottom) / [.width](#geo.width) / [.height](#geo.height) / [.aspectScale](#geo.aspectScale).

`clip` specifies whether to hide the outside part of the map with respect to the allocated rect.

**See example:** [geo roam indicator](https://echarts.apache.org/examples/en/editor.html?c=doc-example/geo-roam-indicator&edit=1&reset=1).""").tag(sync=True)
    
    coordinateSystem = Unicode(None, allow_none=True, help="""Since `v6.0.0`

Specifies another coordinate system component on which this `geo` is laid out.

Options:

* `null`/`undefined`/`'none'`

  Not laid out in any coordinate system; instead, laid out independently.

* `'calendar'`

  Lay out based on a [calendar coordinate system](#calendar). When multiple calendar coordinate systems exist within an ECharts instance, the corresponding system should be specified using [calendarIndex](#geo.calendarIndex) or [calendarId](#geo.calendarId).

* `'matrix'`

  Lay out based on a [matrix coordinate system](#matrix). When multiple matrix coordinate systems exist within an ECharts instance, the corresponding system should be specified using [matrixIndex](#geo.matrixIndex) or [matrixId](#geo.matrixId).

**Support for series and component layout on coordinate systems:**

The leftmost column lists the series and components that will be laid out (coordinate systems themselves are also components), and the topmost row lists the coordinate systems that can be laid out on.

|  | no coord sys | [grid](#grid) (cartesian2d) | [polar](#polar) | [geo](#geo) | [singleAxis](#singleAxis) | [radar](#radar) | [parallel](#parallel) | [calendar](#calendar) | [matrix](#matrix) |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [grid](#grid) (cartesian2d) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [polar](#polar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [geo](#geo) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [singleAxis](#singleAxis) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [calendar](#calendar) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| [matrix](#matrix) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| [series-line](#series-line) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-bar](#series-bar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-pie](#series-pie) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [series-scatter](#series-scatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [series-effectScatter](#series-effectScatter) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [series-radar](#series-radar) | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ (✅ if via [radar](#radar) coord sys) | ❌ (✅ if via [radar](#radar) coord sys) |
| [series-tree](#series-tree) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-treemap](#series-treemap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-sunburst](#series-sunburst) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-boxplot](#series-boxplot) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-candlestick](#series-candlestick) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-heatmap](#series-heatmap) | ❌ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-map](#series-map) | ✅ (create a geo coord sys exclusively) | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-parallel](#series-parallel) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ (✅ if via [parallel](#parallel) coord sys) | ❌ (✅ if via [parallel](#parallel) coord sys) |
| [series-lines](#series-lines) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ (✅ if via another coord sys like [geo](#geo)) | ❌ (✅ if via another coord sys like [geo](#geo)) |
| [series-graph](#series-graph) | ✅ (create a "view" coord sys exclusively) | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-sankey](#series-sankey) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-funnel](#series-funnel) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-gauge](#series-gauge) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [series-pictorialBar](#series-pictorialBar) | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ (✅ if via another coord sys like [grid](#grid)) | ❌ (✅ if via another coord sys like [grid](#grid)) |
| [series-themeRiver](#series-themeRiver) | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ (✅ if via another coord sys like [singleAxis](#singleAxis)) | ❌ (✅ if via another coord sys like [singleAxis](#singleAxis)) |
| [series-chord](#series-chord) | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
| [title](#title) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [legend](#legend) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [dataZoom](#dataZoom) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [visualMap](#visualMap) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [toolbox](#toolbox) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [timeline](#timeline) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| [thumbnail](#thumbnail) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |

See also [geo.coordinateSystemUsage](#geo.coordinateSystemUsage).""").tag(sync=True)
    
    coordinateSystemUsage = Unicode(None, allow_none=True, help="""Since `v6.0.0`

Specify how to lay out this `geo` based on the specified [coordinateSystem](#geo.coordinateSystem).

In most cases, there is no need to specify `coordinateSystemUsage`, unless the default behavior is unexpected.

Options:

* `'data'`: **(Not applicable in [geo](#geo))**

  Each data item of a series (e.g., each `series.data[i]`) is laid out separately based on the specified coordinate system. Currently no non-series component supports `coordinateSystemUsage: 'data'`.
* `'box'`:

  The entire series or component is laid out as a whole based on the specified coordinate system - that is, the overall bounding rect or basic anchor point is calculated relative to the system.

  + For example, a [grid component](#grid) can be laid out in a [matrix coordinate system](#matrix) or a [calendar coordinate system](#calendar), where its layout rectangle is calculated by the specified [geo.coords](#geo.coords) in that system. See example [sparkline in matrix](https://echarts.apache.org/examples/en/editor.html?c=matrix-sparkline&edit=1&reset=1).
  + For example, a [pie series](#series-pie) or a [chord series](#series-chord) can be laid out in a [geo coordinate system](#geo) or a [cartesian2d coordinate system](#grid), where the center is calculated by the specified [series-pie.coords](#series-pie.coords) or [series-pie.center](#series-pie.center) in that system. See example [pie in geo](https://echarts.apache.org/examples/en/editor.html?c=map-iceland-pie&edit=1&reset=1).

See also [geo.coordinateSystem](#geo.coordinateSystem).""").tag(sync=True)
    
    coord = Union([Any(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Since `v6.0.0`

When [coordinateSystemUsage](#geo.coordinateSystemUsage) is `'box'`, `coord` is used as the input to the coordinate system and calculate the layout rectangle or anchor point.

Examples: [sparkline in matrix](https://echarts.apache.org/examples/en/editor.html?c=matrix-sparkline&edit=1&reset=1), [grpah in matrix](https://echarts.apache.org/examples/en/editor.html?c=doc-example/matrix-graph-box&edit=1&reset=1).

> Note: when [coordinateSystemUsage](#geo.coordinateSystemUsage) is `'data'`, the input of coordinate system is `series.data[i]` rather than this `coord`.

The format this `coord` is defined by each coordinate system, and it's the same as the second parameter of [chart.convertToPixel](api.html#echartsInstance.convertToPixel).""").tag(sync=True)
    
    calendarIndex = Float(None, allow_none=True, help="""Since `v6.0.0`

The index of the [calendar coordinate system](#calendar) to base on. When mutiple `calendar` exist within an ECharts instance, use this to specify the corresponding `calendar`.""").tag(sync=True)
    
    calendarId = Float(None, allow_none=True, help="""Since `v6.0.0`

The id of the [calendar coordinate system](#calendar) to base on. When mutiple `calendar` exist within an ECharts instance, use this to specify the corresponding `calendar`.""").tag(sync=True)
    
    matrixIndex = Float(None, allow_none=True, help="""Since `v6.0.0`

The index of the [matrix coordinate system](#matrix) to base on. When mutiple `matrix` exist within an ECharts instance, use this to specify the corresponding `matrix`.""").tag(sync=True)
    
    matrixId = Float(None, allow_none=True, help="""Since `v6.0.0`

The id of the [matrix coordinate system](#matrix) to base on. When mutiple `matrix` exist within an ECharts instance, use this to specify the corresponding `matrix`.""").tag(sync=True)
    
    regions = Any(None, allow_none=True, help="""Configure style for specified regions.
For example:

```
regions: [{
    name: 'Guangdong',
    itemStyle: {
        areaColor: 'red',
        color: 'red'
    }
}]
```

The region color can also be controlled by map series. See [series-map.geoIndex](#series-map.geoIndex).""").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)
    
    tooltip = Dict(default_value=None, allow_none=True, help="""Since `v5.1.0`

tooltip settings in the coordinate system component.

**General Introduction:**

tooltip can be configured on different places:

* Configured on global: [tooltip](#tooltip)
* Configured in a coordinate system: [grid.tooltip](#grid.tooltip), [polar.tooltip](#polar.tooltip), [single.tooltip](#single.tooltip)
* Configured in a series: [series.tooltip](#series.tooltip)
* Configured in each item of `series.data`: [series.data.tooltip](#series.data.tooltip)""").tag(sync=True)
    
        
