ECharts Op
wrapper for echarts-library
Summary (oneliner)
<p>This OP wraps the ECharts data visualization library: <a href="https://echarts.apache.org/en/tutorial.html">https://echarts.apache.org/en/tutorial.html</a> 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.</p>
- Ops.Extension.ECharts.ECharts
- Extension Op - Visible to all users
- MIT
kikohs- echarts.js (Apache ECharts is a powerful, interactive charting and data visualization library for browser)
Documentation (markdown)
Issues
Example patch id
Youtube ids (comma seperated)
Op Licence
Caniuse query
Example Patch Simple ECharts Example
a simple example on how to use the echarts-library to draw graphs in cables
Youtube Video Tutorial
INPUT PORTS
<p>Trigger to create the chart.</p>
<p>Sets the chart as a child of the parent DOM element</p>
<p>ID of the element for selection if you have multiple charts</p>
<i>integer</i>
)<p>Width in pixel</p>
<i>integer</i>
)<p>Height in pixel</p>
<p>Main configuration object, the "options" parameters of the ECharts library</p>
<p>Optional: Sets how to update the chart if new data comes in: <a href="https://echarts.apache.org/en/api.html#echartsInstance.setOption">https://echarts.apache.org/en/api.html#echartsInstance.setOption</a></p>
<i>integer</i>
)<p>0 = canvas, 1 = svg</p>
<p>canvas or svg</p>
<i>integer</i>
)<p>0 = default, 1 = light, 2 = dark</p>
<p>default, light, dark</p>
<p>Optional, if you set this object it overrides the theme of the chart. Create your theme here: <a href="https://echarts.apache.org/en/theme-builder.html">https://echarts.apache.org/en/theme-builder.html</a></p>
<p>Optional chart configuration, see opts object here: <a href="https://echarts.apache.org/en/api.html#echarts">https://echarts.apache.org/en/api.html#echarts</a></p>
<i>string</i>
)<p>Custom CSS to position the chart, width and height will be overridden by the Width and Height input ports</p>
<i>boolean</i>
)<p>Sets whether the chart is visible or not</p>
OUTPUT PORTS
<p>Div element containing the chart</p>
<p>ECharts object</p>
<p>Triggered if the chart has been modified, useful if you continuously update data and refresh the chart</p>
<p>Triggered if the theme has changed</p>
Patches using ECharts
Known Issues
The ECharts WebGL extension library is not supported (yet).
