ECharts点击事件优化：3D GEOMAP柱图解决单击触发多次的问题

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/146115627

在这里插入图片描述

项目描述

单击上图3D柱图时，实时弹窗事件，但是执行了两次；
单击区域，正常执行一次；
echarts.min.js 5.51版 +echarts-gl.min.js

解决方案

1.无效解决方案

myChart.off('click'); //关闭事件
myChart.on('click', click);//点击事件

2.无效解决方案

    //防止重复触发点击事件
    if (myChart._$handlers.click) {
        myChart._$handlers.click.length = 0;
    }

myChart.on('click', click);//点击事件

最终解决方案

    //防止重复触发点击事件
    myChart.off('click');
    myChart.on('click', function (params) {
        // 为了避免重复触发，可以设置一个标志来控制
        if (this._isClicking) {
            return;
        }
        this._isClicking = true;

        //为了确保标志在一定时间后重置，避免后续点击无法触发
        setTimeout(() => {
            this._isClicking = false;
        }, 300);

        //弹窗事件
        if (params.seriesIndex == 1) {
            //console.log(params.name)
            getPopUrl(params.name, '?m=Colliery&a=detail&act=show&col_id=' + params.data.col_id + '&col_code=' + params.data.col_code + '', '', '', '');
        } else {
            console.log("GEO-MAP API：区域无事件")
        }
    });