Echarts地图点击事件重复

执行两次点击事件

当我们点击Echarts地图，在点击事件的里面执行更新地图操作的时候，地图点击事件会执行两次。

如下：

var mapMain = document.getElementById('mapMain');
               var myChart = echarts.init(mapMain);
               myChart.setOption(option);
               myChart.on("click", function (param) {
                   let area_code=param.data.area_code;
                   if (param.name != ""&&area_code!="") {
                       areaCode = area_code;
                       proName=param.name;
                       areaCode=areaCode.substring(0, 2);
                       areaCodeNew=areaCode; //保存当前地区代码
                       c_area_level='2';
                       c_area_level_new=c_area_level; //保存当前地区等级
                       mapData(year, areaCode, c_area_level);//地图点击 地图
                       persent(year, areaCode,c_area_level); //右边 河流面积占区域面积百分比
                   }
                   getDataList(year, areaCodeNew,c_area_level_new);
               });

代码说明：

areaCode、proName、areaCodeNew、c_area_level、c_area_level_new为全局变量；

mapData(year, areaCode, c_area_level) 地图显示方法；

persent(year, areaCode,c_area_level); 河流面积占区域面积百分比方法；

getDataList(year, areaCodeNew,c_area_level_new) 数据显示方法

上面的代码是mapData(year, areaCode, c_area_level) 方法中的一部分。

当执行点击事件的时候：

mapData()、persent()、getDataList()方法会执行两次，有时我们会在点击事件中修改全局变量，这个就需要注意了，执行两次的后的全局变量和执行一次后的全局变量值大多数会有所不同，从而影响其他方法的结果。

如：

假设c_area_level 初始值为’1’,那么执行一次点击事件后c_area_level_new为’1’，c_area_level为’2’；执行两次点击事件后c_area_level_new为’2’，c_area_level为’2’；

这时使用了c_area_level_new的getDataList()方法展示出来的数据会不同。

如何解决重复点击事件

在点击事件执行一次后，再次刷新地图的时候不在执行点击事件。

核心代码：

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

我们只需要将上面那段代码添加到点击事件之就OK了。

var mapMain = document.getElementById('mapMain');
                var myChart = echarts.init(mapMain);
                myChart.setOption(option);
                //防止重复触发点击事件
                if(myChart._$handlers.click){
                    myChart._$handlers.click.length = 0;
                }
                myChart.on("click", function (param) {
                    let area_code=param.data.area_code;
                    if (param.name != ""&&area_code!="") {
                        areaCode = area_code;
                        proName=param.name;
                        areaCode=areaCode.substring(0, 2);
                        areaCodeNew=areaCode; //保存当前地区代码
                        c_area_level='2';
                        c_area_level_new=c_area_level; //保存当前地区等级
                        mapData(year, areaCode, c_area_level);//地图点击 地图
                        persent(year, areaCode,c_area_level); //右边 河流面积占区域面积百分比
                    }
                    getDataList(year, areaCodeNew,c_area_level_new);
                });