echarts地图下钻右击添加返回上一级

1.首先在页面中新建一个替代默认右击的悬浮框

<div id="contextMenu">返回上一级</div>

2.屏蔽自身的右击事件

//屏蔽右击事件
   myChart._dom.oncontextmenu = function(){
        return false;
    }

3.定位右击悬浮框的位置

  myChart.on('contextmenu', function(params) {
        $('#contextMenu').css({
            left: params.event.offsetX,
            top: params.event.offsetY
        }).show();
    });

3.给悬浮框添加单击事件

$('#contextMenu').on('click', function () {
        $(this).hide();
        var map = mapStack.pop();
        if(mapStack.length == 0){
            clickCode='';
            $('#contextMenu').hide();
        }else{
            clickCode=mapStack[0].code;
        }
    getMapData(clickCode,companyType,industryCode);
})

//地图单击时往数组push记录上一次的区域id
myChart.on('click', function (params) {
        if(params.componentSubType!='map')return;//只有点省区才有单击事件
     
        if(flag){//防止多次右击事件
            flag=false;
            if(typeof(params.data) == "undefined"){
                clickCode='';
                mapStack=[];
            }else{
                clickCode=params.data.code;
                mapStack.push({
                    code: clickCode,
                });
            }
            getMapData(clickCode,companyType,industryCode);
          
            setTimeout(function () {
                flag=true;
            },200)
        }

    });```
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章