How to get the specific data of a pie chart through Echarts' getZr().on('click') method?

ECharts Pie Chart Click Event: Get accurate data

When creating pie charts with ECharts, it is not easy to get data directly using getZr().on('click') . target property of a click event usually returns a PiePiece object rather than a direct data value. This article will explain in detail how to effectively obtain click data of a pie chart.

Problem analysis

getZr().on('click') captures the click event, but the returned PiePiece object only contains index information such as dataIndex and seriesIndex , and cannot directly access the data. myChart.containPixel() method is used to determine whether the click position is in the chart area, but its parameter settings are relatively complicated, which can easily lead to judgment errors.

Solution

1. Combine dataIndex and seriesIndex to get data:

   dataIndex and seriesIndex of PiePiece object indicate the index of the data in the corresponding series, respectively. We can use these indexes to extract data from the option object of the ECharts instance.

    myChart.getZr().on('click', function(params) {
       let dataIndex = params.target.dataIndex;
       let seriesIndex = params.target.seriesIndex;
   
       if (dataIndex !== undefined && seriesIndex !== undefined) {
           let data = myChart.getOption().series[seriesIndex].data[dataIndex];
           console.log('Clicked data:', data);
       }
   });

2. Use containPixel to accurately determine the click position:

   The first parameter of myChart.containPixel() method is not a simple 'grid' , but requires an object containing seriesIndex attribute to specify the series to be checked.

    myChart.getZr().on('click', function(params) {
       let pointInPixel = [params.offsetX, params.offsetY];
       let seriesIndex = params.target.seriesIndex; // Get the series index if (myChart.containPixel({ seriesIndex: [seriesIndex] }, pointInPixel)) {
           // ... (Here we use the code in step 1 to get the data) ...
       }
   });

3. Handling multi-ring pie charts:

   For a multi-ring pie chart, seriesIndex indicates which ring is clicked. The above code can handle this situation correctly, just use seriesIndex directly.

Through the above method, we can accurately extract the required data from the click event of the ECharts pie chart. Remember, the correct use of containPixel is crucial to improve the accuracy of click events. Make sure seriesIndex is properly fetched and used for containPixel and data access.

The above is the detailed content of How to get the specific data of a pie chart through Echarts' getZr().on('click') method?. For more information, please follow other related articles on the PHP Chinese website!