ECharts Custom Behavior

Wyn Enterprise supports custom interactivity in ECharts through the Custom Behavior property, available in the Chart Style section of the Inspector panel. This feature allows you to write JavaScript code directly to modify chart behavior at runtime. You can use functions like setTimeout, setInterval, or access the chart instance via myChart to create dynamic effects such as auto-rotation, animations, or real-time updates.

Add a Custom Behavior Script

To add a custom behavior to an EChart:

1. Add an EChart to the Dashboard

   Drag a Column EChart (or any other EChart) onto the design canvas and bind it to your dataset.

2. Open the Custom Behavior Editor

   In the Inspector panel, scroll to the Chart Style section. Click the plus (+) icon next to Custom Behavior.

3. Configure the Behavior

   In the Custom Behavior dialog:

   • Enter a name for the behavior.

   • Set the Invoked Event Type to After Scenario Render (currently the only available option).

   • Write your JavaScript code in the editor. For example, use setInterval to create a simple auto-rotating effect on the chart.

4. Save and Preview

   Click OK to apply the script. Then click Preview in the top ribbon to see the custom behavior in action.

Note: Only the After Scenario Render event is currently supported for triggering custom scripts.

Example Use Case

Below is a common example using setInterval to cycle through chart segments and display tooltips automatically.

js

CopyEdit

let index = 0; setInterval(() => { const dataLen = myChart.getOption().series[0].data.length; myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); index = (index + 1) % dataLen; }, 2000);

This script highlights one data point at a time in a looping carousel.