beta
cables is under heavy development.
There might be one or another bug, please let us know about it!

ECharts Op

Ops.Libs.ECharts.ECharts


ECharts
Namespace: Ops.Libs.ECharts

Op author: kikohs

Uses library: echarts.js (Apache ECharts is a powerful, interactive charting and data visualization library for browser)

wrapper for echarts-library


This OP wraps the ECharts data visualization library: https://echarts.apache.org/en/tutorial.html and allows to create more than a hundred charts with a single configuration object, focusing on the description of the charts instead of its implementation.



Known Issues

The ECharts WebGL extension library is not supported (yet).

Inputs

Create (Trigger)

Trigger to create the chart.

Parent DOM element (Object)

Sets the chart as a child of the parent DOM element

Id (String)

ID of the element for selection if you have multiple charts

Width (integer /Number)

Width in pixel

Height (integer /Number)

Height in pixel

Chart Object (Object)

Main configuration object, the "options" parameters of the ECharts library

Merge options (Object)

Optional: Sets how to update the chart if new data comes in: https://echarts.apache.org/en/api.html#echartsInstance.setOption

Renderer index (integer /Number)

0 = canvas, 1 = svg

Renderer (String)

canvas or svg

Theme index (integer /Number)

0 = default, 1 = light, 2 = dark

Theme (String)

default, light, dark

Custom theme obj (Object)

Optional, if you set this object it overrides the theme of the chart. Create your theme here: https://echarts.apache.org/en/theme-builder.html

Init extra Options (Object)

Optional chart configuration, see opts object here: https://echarts.apache.org/en/api.html#echarts

Style (string /Number)

Custom CSS to position the chart, width and height will be overridden by the Width and Height input ports

Visible (boolean /Number)

Sets whether the chart is visible or not

Outputs

DOM Element (Object)

Div element containing the chart

ECharts instance (Object)

ECharts object

Chart updated (Trigger)

Triggered if the chart has been modified, useful if you continuously update data and refresh the chart

Theme changed (Trigger)

Triggered if the theme has changed

Caught a mistake or want to contribute to the documentation?

Edit Documentation 

Simple ECharts Example

a simple example on how to use the echarts-library to draw graphs in cables

Open Example In Editor


Youtube Video Tutorial

Patches using ECharts

Changelog


created op
2021-03-05 - kikohs

Ops.User.stephan.ECharts renamed to Ops.Libs.ECharts
2021-03-05 - stephan

Ops.Libs.ECharts renamed to Ops.Libs.ECharts.ECharts
2021-03-05 - stephan