echarts 关系图力导向图实现右键弹出操作框

效果图：

html 代码：

<!--echarts图表-->
<div id="prem5">
   <div id="option_prem5" style="height:500px;"></div>
</div>
<!--右键弹出菜单-->
<div id="rightMenu" class="menu" style="display: none;height:200px;width:100px;overflow-y:auto;background:#EEEEEE;">
    <ul>
        <li>
            <button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">主机通信
            </button>
        </li>
        <li>
            <button id="btn_Grid_peiZhi" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
                主机配置
            </button>
        </li>
        <li>
            <button id="btn_Grid_process" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
                主机进程
            </button>
        </li>
        <li>
            <button id="btn_Grid_treediagram" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
                配置详情
            </button>
        </li>
        <li>
            <button id="btn_Grid_version" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
                软件版本
            </button>
        </li>
    </ul>
</div>

js 代码：

function caozuokuang() {
        /**
         * 鼠标右键，弹出右键操作菜单
         */
        $("#option_prem5").bind("contextmenu", function () {
            return false;
        });//防止默认菜单弹出（查看图像,图像另存为等）
        myChart.on("contextmenu", function (params) {
            // console.log('params',params)
            $('#rightMenu').css({
                'display': 'block',
                'left': params.event.offsetX + 15,
                'top': params.event.offsetY - 150
            });
            //todo 右键菜单刚弹出时，隐藏鼠标悬停菜单
            $("#option_prem5>div:nth-child(2)").hide();
        });
        /**
         * 点击画布的时候隐藏右键菜单
         */
        $('#prem5').click(function () {
            $('#rightMenu').css({
                'display': 'none',
                'left': '-9999px',
                'top': '-9999px'
            });
        });
    }

css 代码：

/* 不加这一行序列前面会有空格 */
*{padding: 0;margin: 0;}
/*右键菜单样式*/
.menu{
    /*这个样式不写，右键弹框会一直显示在画布的左下角*/
    position: absolute;
    background: #444444;
    border-radius: 5px;
    left: -99999px;
    top: -999999px;
}
.menu ul{list-style: none}
.menu ul li{
    padding: 5px 10px;
    color: #ffff;
    align-content: center;
    border-bottom: 1px dashed #ffffff;
    font-size: 14px;
}
.menu ul li:last-child{
    border-bottom: none;
}