Ops ⟩ Extension ⟩ ECharts ⟩ ECharts

ECharts Op

extension op - visible to all users

ECharts

Op author: kikohs
Maintained by Team: ECharts

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

Team ECharts (1)
Examples (1)
Public
My Patches

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
	Ops.Libs.ECharts.ECharts renamed to Ops.Extension.ECharts.ECharts 2022-12-14 - stephan