Skip to main content

Echart (Echart) Widget Control

This page lists the Widget Control (Method) available for controlling the Echart widget from a script. To learn about the widget itself and how to use it, visit Echart.

info

The echartID in the examples below is the name (ID) you assigned to the Echart widget on the canvas. In scripts, you access members in the form widgetID.member.

Widget Control summary​

Widget ControlKindSignatureDescription
setVarMethodsetVar(name, value)Sets (replaces) the value of a single chart variable
setOptionMethodsetOption(optionJson)Replaces the entire chart option (ECharts option)
setOptionPartialMethodsetOptionPartial(optionJson)Merges partially into the chart option (updates only the changed keys)
dispatchActionMethoddispatchAction(actionJson)Sends an ECharts action to the chart (such as highlight)

Property​

info

Not applicable — the Echart widget has no script-only Property. In scripts, read and write values with the common Widget Control below (getProperty / setProperty).

Method​

setVar​

Sets the value of a single chart variable, replacing any existing value bound to the same name. Call it before the chart finishes loading and the value is cached, then applied on the chart's first render.

  • Kind: Method
  • Parameters:
    • name (string): The name of the variable that the option template references
    • value (string): The variable value. Pass it as a JSON string — it's parsed before being sent (arrays, objects, and primitive values)
  • Returns: None (no return value)

Example

echartID.setVar("series1", [120, 200, 150]);

setOption​

Replaces the entire chart option (ECharts option) with the JSON you pass in. This overwrites the option template configured on the component.

  • Kind: Method
  • Parameters:
    • optionJson (object): A complete ECharts option object
  • Returns: None (no return value)

Example

echartID.setOption({
  xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: [120, 200, 150] }]
});

setOptionPartial​

Merges the JSON you pass in into the current chart option — it does not replace the whole option. Only the keys present in optionJson are updated, and everything else stays as is. Use it for partial (incremental) updates.

  • Kind: Method
  • Parameters:
    • optionJson (object): The partial ECharts option object to merge
  • Returns: None (no return value)

Example

echartID.setOptionPartial({
  series: [{ data: [130, 210, 160] }]
});

dispatchAction​

Sends an ECharts action — highlight or showTip, for example — to the chart. It does nothing until the chart finishes initializing.

  • Kind: Method
  • Parameters:
    • actionJson (object): An ECharts action payload object
  • Returns: None (no return value)

Example

echartID.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: 2 });

Event​

info

Not applicable — the Echart widget has no dedicated Event.

Common Widget Control (all widgets)​

note

Every widget supports name-based common Widget Control (Method) such as setProperty, getProperty, and setStyleProperty. See the common reference doc (to be written).