美文网首页程序员
echarts地图下钻右击添加返回上一级

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

作者: 程序员是粉色的 | 来源:发表于2020-10-12 13:14 被阅读0次

    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)
            }
    
        });```

    相关文章

      网友评论

        本文标题:echarts地图下钻右击添加返回上一级

        本文链接:https://www.haomeiwen.com/subject/gyuupktx.html