Customizing Interactive Actions for ECharts Widgets

Customizing Interactive Actions

1. Select an ECharts widget and click .
2. Expand Custom Actions, click Add Custom Actions, and change the action name to HighlightingData.
   Figure 1 Creating a custom action
   

3. In the action implementation, enter the following code to call the ECharts action API:

   echartsInst.dispatchAction({
        type: 'highlight',
        dataIndex: params.dataIndex,
    });

4. Click the button to add parameters and set the parameter name to dataIndex.
   Figure 2 Adding the dataIndex field
   

5. Select the ECharts widget and click to access the widget interaction page.
6. In As Responder, click Interaction Event and select the widget loading event.
7. In Response Actions, click Response Actions and select Widget Action.
8. In the action details, select the ECharts widget as the response widget, select HighlightingData as the response action, and set dataIndex to 0.
   Figure 3 Setting the action details
   

9. Save the interaction settings and preview the page. The ECharts widget renders the first data to obtain the highlight effect.
   Figure 4 Viewing the rendering effect