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 Graph(BaseWidget):
    """ 
:warning: **Autogenerated class**

**relation graph**

Graph is a diagram to represent [nodes](#series-graph.nodes) and the [links](#series-graph.links) connecting nodes.

**Example:**
    """

    def __init__(self, **kwargs):

        super().__init__(**kwargs)  
    
    _model_name = Unicode("GraphModel").tag(sync=True)
    
    type = Unicode("graph", 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)
    
    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="""Specifies another coordinate system component on which this `series-graph` is laid out.

Options:

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

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

* `'cartesian2d'`

  Lay out based on a two-dimensional [rectangular coordinate system (also known as Cartesian coordinate system)](#grid). When multiple `xAxis` or multiple `yAxis` exist within an ECharts instance, the corresponding axes should be specified using [xAxisIndex](#series-graph.xAxisIndex) and [yAxisIndex](#series-graph.yAxisIndex) or [xAxisId](#series-graph.xAxisId) and [yAxisId](#series-graph.yAxisId).

  Note: some commonly used series, such as [series-line](#series-line), [series-bar](#series-bar), etc., can not be laid out directly based on [matrix coordinate system](#matrix) or [calendar coordinate system](#calendar), but they can be laid out on a [grid(Cartesian)](#grid), and that [grid](#grid) can be laid out on a [matrix](#matrix) or [calendar](#calendar).

* `'polar'`

  Lay out based on a [polar coordinate system](#polar). When multiple polar coordinate systems exist within an ECharts instance, the corresponding system should be specified using [polarIndex](#series-graph.polarIndex) or [polarId](#series-graph.polarId).

* `'geo'`

  Lay out based on a [geographic coordinate system](#geo). When multiple geographic coordinate systems exist within an ECharts instance, the corresponding system should be specified using [geoIndex](#series-graph.geoIndex) or [geoId](#series-graph.geoId).

* `'singleAxis'`

  Lay out based on a [singleAxis coordinate system](#singleAxis). When multiple singleAxis coordinate systems exist within an ECharts instance, the corresponding system should be specified using [singleAxisIndex](#series-graph.polarIndex) or [singleAxisId](#series-graph.polarId).

* `'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](#series-graph.calendarIndex) or [calendarId](#series-graph.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](#series-graph.matrixIndex) or [matrixId](#series-graph.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 [series-graph.coordinateSystemUsage](#series-graph.coordinateSystemUsage).""").tag(sync=True)
    
    coordinateSystemUsage = Unicode(None, allow_none=True, help="""Since `v6.0.0`

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

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

Options:

* `'data'`:

  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'`: **(Not applicable in [series-graph](#series-graph))**

  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 [series-graph.coords](#series-graph.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).

Only a few series support both `coordinateSystemUsage: 'data'` and `coordinateSystemUsage: 'box'`, such as [series-graph](#series-graph), [series-map](#series-map). For examle, in [this example (coordinateSystemUsage: 'data')](https://echarts.apache.org/examples/en/editor.html?c=matrix-graph&edit=1&reset=1), each node of a graph series is laid out on a matrix coordinate system, while in [this example (coordinateSystemUsage: 'box')](https://echarts.apache.org/examples/en/editor.html?c=doc-example/matrix-graph-box&edit=1&reset=1), the entire graph series is laid out within a matrix cell.

Most series only support `coordinateSystemUsage: 'data'` - such as [series-line](#series-line), [series-bar](#series-bar), [series-scatter](#series-scatter), etc. Meanwhile, some series only support `coordinateSystemUsage: 'box'` - such as [series-pie](#series-pie) ([example: pie in geo](https://echarts.apache.org/examples/en/editor.html?c=map-iceland-pie&edit=1&reset=1)), [series-tree](#series-pie), [series-treemap](#series-treemap), [series-sankey](#series-sankey), etc.

See also [series-graph.coordinateSystem](#series-graph.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](#series-graph.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](#series-graph.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)
    
    xAxisIndex = Float(None, allow_none=True, help="""The index of the [xAxis](#xAxis) to base on. When mutiple `xAxis` components exist within an ECharts instance, use this to specify the corresponding `xAxis`.""").tag(sync=True)
    
    xAxisId = Float(None, allow_none=True, help="""The id of the [xAxis](#xAxis) to base on. When mutiple `xAxis` components exist within an ECharts instance, use this to specify the corresponding `xAxis`.""").tag(sync=True)
    
    yAxisIndex = Float(None, allow_none=True, help="""The index of the [yAxis](#yAxis) to base on. When mutiple `yAxis` components exist within an ECharts instance, use this to specify the corresponding `yAxis`.""").tag(sync=True)
    
    yAxisId = Float(None, allow_none=True, help="""The index of the [yAxis](#yAxis) to base on. When mutiple `yAxis` components exist within an ECharts instance, use this to specify the corresponding `yAxis`.""").tag(sync=True)
    
    polarIndex = Float(None, allow_none=True, help="""The index of the [polar coordinate system](#polar) to base on. When mutiple `polar` exist within an ECharts instance, use this to specify the corresponding `polar`.""").tag(sync=True)
    
    polarId = Float(None, allow_none=True, help="""The id of the [polar coordinate system](#polar) to base on. When mutiple `polar` exist within an ECharts instance, use this to specify the corresponding `polar`.""").tag(sync=True)
    
    singleAxisIndex = Float(None, allow_none=True, help="""The index of the [singleAxis coordinate system](#singleAxis) to base on. When mutiple `singleAxis` exist within an ECharts instance, use this to specify the corresponding `singleAxis`.""").tag(sync=True)
    
    singleAxisId = Float(None, allow_none=True, help="""The id of the [singleAxis coordinate system](#singleAxis) to base on. When mutiple `singleAxis` exist within an ECharts instance, use this to specify the corresponding `singleAxis`.""").tag(sync=True)
    
    geoIndex = Float(None, allow_none=True, help="""The index of the [geographic coordinate system](#geo) to base on. When mutiple `geographic` exist within an ECharts instance, use this to specify the corresponding `geographic`.

**See example**: [geo-choropleth-scatter](https://echarts.apache.org/examples/en/editor.html?c=geo-choropleth-scatter&reset=1&edit=1)""").tag(sync=True)
    
    geoId = Float(None, allow_none=True, help="""The id of the [geographic coordinate system](#geo) to base on. When mutiple `geographic` exist within an ECharts instance, use this to specify the corresponding `geographic`.

**See example**: [geo-choropleth-scatter](https://echarts.apache.org/examples/en/editor.html?c=geo-choropleth-scatter&reset=1&edit=1)""").tag(sync=True)
    
    calendarIndex = Float(None, allow_none=True, help="""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="""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="""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="""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)
    
    layout = Unicode(None, allow_none=True, help="""Graph layout.

**Options:**

* `'none'` No any layout, use [x](#series-graph.data.x), [y](#series-graph.data.y) provided in [node](#series-graph.data) as the position of node.
* `'circular'` Adopt circular layout, see the example [Les Miserables](https://echarts.apache.org/examples/en/editor.html?c=graph-circular-layout).
* `'force'` Adopt force-directed layout, see the example [Force](https://echarts.apache.org/examples/en/editor.html?c=graph-force), the detail about configurations of layout are in [graph.force](#series-graph.force)""").tag(sync=True)
    
    circular = Dict(default_value=None, allow_none=True, help="""Configuration about circular layout.""").tag(sync=True)
    
    force = Dict(default_value=None, allow_none=True, help="""Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.

The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.""").tag(sync=True)
    
    center = Any(None, allow_none=True, help="""`center` specifies which point on the graphic elements 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 graphic elements when [roamming](#series-graph.roam) is performed. When roaming, the values in `center` and [zoom](#series-graph.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 graphic elements by viewport coordinates, use [series-graph.left](#series-graph.left) / [.right](#series-graph.right) / [.top](#series-graph.top) / [.bottom](#series-graph.bottom) / [.width](#series-graph.width) / [.height](#series-graph.height) .

If using absolute numbers in `center`:

* If [series-graph.layout](#series-graph.layout) is `'none'`, you need to provide coordinates for each node explicitly in [series-graph.data.x](#series-graph.data.x), [series-graph.data.y](#series-graph.data.y). In this case, `center` can be absolute numbers as that kind of coordinates. For example,

  ```
    option = {
        series: {
            type: 'graph',
            center: [0, 10],
            data: [
                {x: 100, y: 3000},
                {x: 150, y: 3500},
                {x: 200, y: 4000},
            ],
        }
    }
    // The bounding rect of the graph is determined by series.data.x/series.data.y:
    //    minX: 100, maxX: 200,
    //    minY: 3000, maxY: 4000,
    // `center: [0, 10]` indicates that the point `[0, 10]` should be placed in
    //  the center of the viewport (typically, canvas).
    // Consequently, the graph will be displayed at the right side of the viewport,
    //  and probably overflow.
  ```
* Otherwise, when specifying an auto-layout strategy in [series-graph.layout](#series-graph.layout), the coordinates are not user-determinable, so using absolute numbers in `center` is unfeasible.

A percentage string can also be used in `center`, like `'30%'`, based on the bounding rect. 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 graphic elements at the the center of the viewport.
For example:

```
center: [115, '30%']
// Place the top of graphic elements to the center of the viewport (canvas)
center: [115, '0%']
// Place the left of graphic elements to the center of the viewport (canvas)
center: ['0%', 13]
// Place the bottom of graphic elements to the center of the viewport (canvas)
center: [115, '100%']
// Place the right of graphic elements to the center of the viewport (canvas)
center: ['100%', 13]
// Place graphic elements 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 [graph roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/graph-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](#series-graph.roam), the values in [center](#series-graph.center) and `zoom` will be modified correspondingly.

**See [graph roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/graph-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](#series-graph.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](#series-graph.center) and [zoom](#series-graph.zoom) will be modified correspondingly.""").tag(sync=True)
    
    roamTrigger = Unicode(None, allow_none=True, help="""Since `v6.0.0`

[Roaming](#series-graph.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'`:

  The roaming can be triggered in canvas globally.

**See [graph roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/graph-roam-indicator&edit=1&reset=1)** to understand the concept.""").tag(sync=True)
    
    nodeScaleRatio = Float(None, allow_none=True, help="""Related zooming ratio of nodes when mouse zooming in or out. When it is set as 0, the node will not zoom as the mouse zooms.""").tag(sync=True)
    
    draggable = Bool(None, allow_none=True, help="""If node is draggable.

Note that this option is only available when using [force-directed layout](#series-graph.force) before `v5.4.1`.""").tag(sync=True)
    
    symbol = Unicode(None, allow_none=True, help="""Symbol of node.

Icon types provided by ECharts includes

`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`, `'none'`

It can be set to an image with `'image://url'` , in which URL is the link to an image, or `dataURI` of an image.

An image URL example:

```
'image://http://example.website/a/b.png'
```

A `dataURI` example:

```
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
```

Icons can be set to arbitrary vector path via `'path://'` in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) for more information about the format of the path. You may export vector paths from tools like Adobe

For example:

```
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
```""").tag(sync=True)
    
    symbolSize = Union([Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""node symbol size. It can be set to single numbers like `10`, or use an array to represent width and height. For example, `[20, 10]` means symbol width is `20`, and height is`10`.""").tag(sync=True)
    
    symbolRotate = Float(None, allow_none=True, help="""Rotate degree of node symbol. The negative value represents clockwise. Note that when `symbol` is set to be `'arrow'` in `markLine`, `symbolRotate` value will be ignored, and compulsively use tangent angle.""").tag(sync=True)
    
    symbolKeepAspect = Bool(None, allow_none=True, help="""Whether to keep aspect for symbols in the form of `path://`.""").tag(sync=True)
    
    symbolOffset = Any(None, allow_none=True, help="""Offset of node symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

For example, `[0, '-50%']` means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.""").tag(sync=True)
    
    edgeSymbol = Union([Any(default_value=None, allow_none=True),Unicode(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Symbol of two ends of edge line.

For example:

```
edgeSymbol: ['circle', 'arrow']
```""").tag(sync=True)
    
    edgeSymbolSize = Union([Any(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""Size of symbol of two ends of edge line. Can be an array or a single number.

For example:

```
// Start symbol has size 5 and end symbol has size 10
edgeSymbolSize: [5, 10],
// All has size 10
edgeSymbolSize: 10
```""").tag(sync=True)
    
    cursor = Unicode(None, allow_none=True, help="""The mouse style when mouse hovers on an element, the same as `cursor` property in `CSS`.""").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)
    
    lineStyle = Dict(default_value=None, allow_none=True, help="""The style of edge line. [lineStyle.color](#series-graph.lineStyle.color) can be `'source'` or `'target'`, which will use the color of source node or target node.""").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)
    
    edgeLabel = Dict(default_value=None, allow_none=True, ).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)
    
    emphasis = Dict(default_value=None, allow_none=True, help="""Configurations of emphasis state.""").tag(sync=True)
    
    blur = Dict(default_value=None, allow_none=True, help="""Since `v5.0.0`

Configurations of blur state. Available when [emphasis.focus](#series-graph.emphasis.focus) is set.""").tag(sync=True)
    
    select = Dict(default_value=None, allow_none=True, help="""Since `v5.0.0`

Configurations of select state. Available when [selectedMode](#series-graph.selectedMode) is set.""").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)
    
    categories = Any(None, allow_none=True, help="""The categories of node, which is optional.
If there is a classification of nodes, the category of each node can be assigned through [data[i].category](#series-graph.data.category). And the style of category will also be applied to the style of nodes. `categories` can also be used in [legend](#legend).""").tag(sync=True)
    
    autoCurveness = Union([Bool(default_value=None, allow_none=True),Float(default_value=None, allow_none=True),Any(default_value=None, allow_none=True),], default_value=None, allow_none=True, help="""For the situation where there are multiple links between nodes, the curveness of each link is automatically calculated, not enabled by default.

When set to `true`, it enables automatic curvature calculation. The default edge curveness array length is `20`, if the number of edges between two nodes is more than `20`, please use `number` or `Array` to set the edge curveness array.

When set to `number`, it indicates the length of the edge curveness array between two nodes, and the calculation result is given by the internal algorithm.

When set to `Array`, it means that the curveness array is directly specified, and the multilateral curveness is directly selected from the array.

**Notice：** if [lineStyle.curveness](#series-graph.lineStyle.curveness) has been set, this property is invalid.""").tag(sync=True)
    
    data = Any(None, allow_none=True, help="""Nodes list of graph.

```
data: [{
    name: '1',
    x: 10,
    y: 10,
    value: 10
}, {
    name: '2',
    x: 100,
    y: 100,
    value: 20,
    symbolSize: 20,
    itemStyle: {
        color: 'red'
    }
}]
```""").tag(sync=True)
    
    nodes = Any(None, allow_none=True, help="""Alias of [data](#series-graph.data)""").tag(sync=True)
    
    links = Any(None, allow_none=True, help="""Relational data between nodes. Example:

```
links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]
```""").tag(sync=True)
    
    edges = Any(None, allow_none=True, help="""Alias of [links](#series-graph.links)""").tag(sync=True)
    
    markPoint = Dict(default_value=None, allow_none=True, help="""Mark point in a chart.""").tag(sync=True)
    
    markLine = Dict(default_value=None, allow_none=True, help="""Use a line in the chart to illustrate.""").tag(sync=True)
    
    markArea = Dict(default_value=None, allow_none=True, help="""Used to mark an area in chart. For example, mark a time interval.""").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 graph series 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](#series-graph.preserveAspect).""").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 graph series 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](#series-graph.preserveAspect).""").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 graph series 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](#series-graph.preserveAspect).""").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 graph series 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](#series-graph.preserveAspect).""").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 graph series.

`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](#series-graph.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 graph series.

`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](#series-graph.preserveAspect).""").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 `graph series` is determined by [series-graph.left](#series-graph.left) / [.right](#series-graph.right) / [.top](#series-graph.top) / [.bottom](#series-graph.bottom) / [.width](#series-graph.width) / [.height](#series-graph.height).

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 `graph series 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 `graph series rectangular area`, and scaled up as much as possible to meet the `graph series rectangular area`. [preserveAspectAlign](#series-graph.preserveAspectAlign) and [preserveAspectVerticalAlign](#series-graph.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 `graph series rectangular area`, and scaled down as much as possible to meet the `graph series rectangular area`. [preserveAspectAlign](#series-graph.preserveAspectAlign) and [preserveAspectVerticalAlign](#series-graph.preserveAspectVerticalAlign) can be used to adjust the position in this case.

**See [graph roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/graph-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](#series-graph.preserveAspect).

**See [graph roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/graph-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](#series-graph.preserveAspect).

**See [graph roam indicator example](https://echarts.apache.org/examples/en/editor.html?c=doc-example/graph-roam-indicator&edit=1&reset=1)** to understand the concept.""").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)
    
    tooltip = Dict(default_value=None, allow_none=True, help="""tooltip settings in this series.""").tag(sync=True)
    
        
