ECharts Op


wrapper for echarts-library

This OP wraps the ECharts data visualization library: 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.

Edit Documentation

Full Name
  • Ops.Extension.ECharts.ECharts
  •  Extension Op - Visible to all users
  • MIT
AuthorMaintained by TeamJavascript Libraries
  • echarts.js (Apache ECharts is a powerful, interactive charting and data visualization library for browser)


Example Patch Simple ECharts Example

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

Open In Editor

Youtube Video Tutorial


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 (Number:integer )

Width in pixel

Height (Number:integer )

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:

Renderer index (Number:integer )

0 = canvas, 1 = svg

Renderer (String)

canvas or svg

Theme index (Number:integer )

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:

Init extra Options (Object)

Optional chart configuration, see opts object here:

Style (Number:string )

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

Visible (Number:boolean )

Sets whether the chart is visible or not


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

Patches using ECharts

  • Examples
  • Public
  • My Patches

Known Issues

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


created opuser avatarkikohs - 2021-03-05 12:57
Ops.User.stephan.ECharts renamed to Ops.Libs.EChartsuser avatarstephan - 2021-03-05 14:01
Ops.Libs.ECharts renamed to Ops.Libs.ECharts.EChartsuser avatarstephan - 2021-03-05 14:03
Ops.Libs.ECharts.ECharts renamed to Ops.Extension.ECharts.EChartsuser avatarstephan - 2022-12-14 10:06