Echart

The Echart widget draws interactive charts powered by ECharts.
Define bar, line, pie, and other chart types with options in JSON, then bind data to variables to display it.

Definition and role

The Echart widget loads ECharts in an internal WebView and renders the chart there. Define the chart's appearance with ECharts options in JSON, and fill in the data items by binding them to a variable list. While the app runs, use a script to update options, data, and actions.

• Category: Contents
• Default size: width 300 / height 200
• Default renderer: canvas — SVG optionally
• In edit (design) mode you see a placeholder area labeled Echart instead of the real chart, and the chart is drawn when the app runs.

Features

Feature	Description
Chart rendering	Draws the chart you defined with ECharts options in JSON.
Data binding	Binds data — a list or a single value — into the variable slots of the option template.
Renderer choice	Choose the canvas or the SVG renderer.
Background color	Set the chart's background color.
Loading indicator	Choose whether to show a loading indicator while the chart loads.
Script control	Update options and data from a script at runtime, and dispatch chart actions.

How to use

1. Open the Contents category in the left widget palette.
2. Drag the Echart item onto the canvas.
3. In the Properties panel on the right, set Echart Data — the option template and the data variables.
4. Adjust the background color (bgColor), the renderer (useSvgRenderer), the loading indicator (showLoadingBar), and other settings as needed.

Properties

Property	Description	Default	Value / Type
bgColor	Chart background color	Not set	Color
Echart Data	Chart option template (JSON) and the list of data variables	Empty options (no variables)	Chart data
showLoadingBar	Whether to show a loading indicator while the chart loads	false	true / false
useSvgRenderer	Whether to use the SVG renderer — canvas when off	false	true / false
embedInParentScroll	Passes mouse wheel events to the parent scroll (macOS)	true	true / false

Notes and tips

note

In edit (design) mode you only see the Echart label placeholder. The real chart renders when the app runs.

tip

If canvas rendering gives you trouble, turn on useSvgRenderer to switch to the SVG renderer. At runtime, update options and data from a script to redraw the chart.

Learn more

tip

For the full set of Widget Controls (Property, Method, and Event) that drive this widget from a script, visit Echart Widget Control.