在Echarts中如何通过getZr().on('click')方法获取饼图的具体数据以及处理多层次环形图？

ECharts饼图点击事件数据获取及多层环形图处理

ECharts饼图的点击事件处理经常需要获取具体数据，但getZr().on('click')方法返回的target属性为PiePiece对象，无法直接获取数据。本文将解决此问题，并讲解如何处理多层环形图的点击事件。

问题分析

使用getZr().on('click')只能获取到PiePiece，无法直接获取数据。myChart.containPixel方法的第一个参数设置也容易出错，尤其在饼图（非网格）场景下。许多教程只关注网格图的myChart.containPixel('grid', pointInPixel)用法，并不适用于饼图。此外，如何从多层环形图中单独获取每个环的数据也是一个挑战。

解决方案

1. 获取具体数据: 结合myChart.getOption()和myChart.convertFromPixel方法，可以有效获取点击的数据。

   myChart.getZr().on('click', function(params) {
       let pointInPixel = [params.offsetX, params.offsetY];
       let seriesIndex = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
   
       if (seriesIndex !== undefined) {
           let dataIndex = myChart.convertFromPixel({ seriesIndex: seriesIndex }, pointInPixel)[1];
           let seriesData = myChart.getOption().series[seriesIndex].data[dataIndex];
           console.log(seriesData); // 输出点击的数据项
       }
   });

   convertFromPixel方法将像素坐标转换为图表坐标，得到seriesIndex和dataIndex，再从getOption()获取到的配置中提取对应数据。

   

   快剪辑

   国内⼀体化视频⽣产平台

   下载

2. myChart.containPixel的正确用法: myChart.containPixel的第一个参数应为包含seriesIndex的对象，对于多层环形图，需要遍历所有可能的seriesIndex。

   let pointInPixel = [params.offsetX, params.offsetY];
   let seriesCount = myChart.getOption().series.length; // 获取系列数量
   
   for (let i = 0; i < seriesCount; i++) {
       if (myChart.containPixel({ seriesIndex: i }, pointInPixel)) {
           let dataIndex = myChart.convertFromPixel({ seriesIndex: i }, pointInPixel)[1];
           let seriesData = myChart.getOption().series[i].data[dataIndex];
           console.log(`Series ${i}:`, seriesData); // 输出对应系列的数据
           break; // 找到后跳出循环
       }
   }

3. 多层环形图数据获取: 通过遍历所有系列 (myChart.getOption().series) 并使用上述方法获取每个系列的数据，即可实现对多层环形图中每个环的数据单独获取。

通过以上方法，可以有效地获取ECharts饼图（包括多层环形图）的点击事件数据，解决数据获取和多层图处理的难题。 记住根据你的图表配置调整seriesIndex的范围。