Customizing Event Interactions for ECharts Widgets

Customizing Event Interactions

1. On the large screen design page, drag a stacked line chart widget from the ECharts section to the canvas.
   Figure 1 Dragging a stacked line chart widget to the canvas
   

2. Select the stacked line chart widget and click .
3. In the Custom Events area, click Add Custom Events and change the event name to echartsclickseries.
   Figure 2 Creating an echartsclickseries event
   

4. In the event implementation, enter the following code. The ECharts instance will trigger this event on click and pass the event object as a parameter.

   echartsInst.on('click', 'series', triggerCurrentEvent);

5. Click Add Field and set the field name to seriesIndex.
   Figure 3 seriesIndex field
   

6. Select the ECharts widget and click to access the widget interaction page.
7. Click Interaction Event and select echartsclickseries.
8. Set the response action for the echartsclickseries event. For example, assign the seriesIndex field value to a global variable.
   Figure 4 Assigning the value of seriesIndex to the global variable
   

9. Click the finish button to return to the large screen design page.
10. Drag a solid pie chart from All to the canvas.
11. Sets data for a solid pie chart.
    1. Select the solid pie chart and click .
    2. Select Dataset for Data Type and select the required dataset.
    3. In the global variable configuration, bind the global variables in 8 and assign values to the global variables.
       Figure 5 Binding global variables
       
    4. In the widget preview area, drag the corresponding field from the table field to the configuration and click Save.

12. Return to the large screen design page, click , and click .
13. On the preview page, click a series in the stacked line chart chart. The global variable of the page is set to the value of seriesIndex.