ECharts饼图点击事件：精准获取数据详解

本文将详细讲解如何在ECharts饼图中利用getZr().on('click')方法精确获取点击数据，并解决常见问题，例如仅获取target: PiePiece以及myChart.containPixel()方法使用中的误区。

getZr().on('click')方法本身只提供点击事件，无法直接获取饼图数据。我们需要结合myChart.getOption()和坐标转换来实现。

步骤一：添加点击事件监听器

首先，为ECharts图表添加点击事件监听器：

myChart.getZr().on('click', function(params) {
    let pointInPixel = [params.offsetX, params.offsetY];
    // 后续步骤将使用 pointInPixel 获取数据
});

步骤二：使用myChart.containPixel()判断点击位置

myChart.containPixel()方法的第一个参数并非简单的字符串（例如'grid'），而是包含seriesIndex的对象。对于饼图，我们需要指定seriesIndex来确定点击的是哪个饼图系列。假设你的饼图seriesIndex为0：

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

if (myChart.containPixel({seriesIndex: 0}, pointInPixel)) {
    // 点击位于饼图区域内
}

步骤三：坐标转换和数据提取

如果containPixel返回true，则使用myChart.convertFromPixel()将像素坐标转换为图表数据索引：

let dataIndex = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel)[0];
let data = myChart.getOption().series[0].data[dataIndex];
console.log(data); // 输出点击的数据项

步骤四：处理多环形饼图

对于多环形饼图，每个环形需要一个seriesIndex。你需要循环处理每个系列：

myChart.getZr().on('click', function(params) {
    let pointInPixel = [params.offsetX, params.offsetY];
    for (let i = 0; i < myChart.getOption().series.length; i++) {
        if (myChart.containPixel({seriesIndex: i}, pointInPixel)) {
            let dataIndex = myChart.convertFromPixel({seriesIndex: i}, pointInPixel)[0];
            let data = myChart.getOption().series[i].data[dataIndex];
            console.log(`Series ${i}:`, data);
        }
    }
});

通过以上步骤，你可以准确地获取ECharts饼图中点击数据的详细信息，并轻松处理单环形和多环形饼图的情况。 记住，关键在于正确使用seriesIndex以及convertFromPixel方法进行坐标转换。