beta
cables is under heavy development.
There might be one or another bug, please let us know about it!
Namespace: Ops.Libs.ECharts
wrapper for echarts-library

summary (oneliner)

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).

doc

issues

youtube id

collections

related ops

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 Documentationcancel save
Simple ECharts Example:

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



video tutorial:

Credits


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

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

Examples using ECharts

Public Patches using ECharts