推荐一个超好用的在页面元素间画箭头的插件-leaderline

官方文档地址：https://anseki.github.io/leader-line/

控件定义

/**画动态的折线
 * start：画线起始对象id
 * end:画线终止对象id
 **/
function drawGridLine(start,end,place,options) {
    var  initOptions = addOptions({
        color: 'Black',
        path:'grid',
        size: 3,
        dash: {
            animation: true
        }
    },options,place);
    return new LeaderLine(getObject(start),getObject(end),initOptions);
}
/**画请求成功曲线
 * start：画线起始对象id
 * end:画线终止对象id
 **/
function drawSuccessLine(start,end,place,options) {
    var initOptions =  addOptions({
        color: 'Green',
        path:'grid',
        size: 3,
        startPlugColor: '#1a6be0',
        endPlugColor: '#1efdaa',
        gradient: true
    },options,place);
    return new LeaderLine(getObject(start),getObject(end),initOptions);
}
/**画默认曲线
 * start：画线起始对象id
 * end:画线终止对象id
 **/
function drawInitLine(start,end,place,options) {
    var initOptions = addOptions({
        color: '#b2b2b3',
        path:'grid',
        size: 3
    },options,place);
    return new LeaderLine(getObject(start), getObject(end),initOptions);
}
/**
 * 根据ID获取组件*/
function getObject(id){
    return document.getElementById(id);
}
function addOptions(initOptions,options,place) {
    if(!isEmpty(options)){
        $.extend(initOptions,options);
    }
    if(!isEmpty(place)){
        if(place == 'top-left'){
            $.extend(initOptions,{startSocket: 'top', endSocket: 'left'});
        }else if(place == 'right-top'){
            $.extend(initOptions,{startSocket: 'right', endSocket: 'top'});
        }else if(place == 'bottom-right'){
            $.extend(initOptions,{startSocket: 'bottom', endSocket: 'right'});
        }else if(place== 'left-bottom'){
            $.extend(initOptions,{startSocket: 'left', endSocket: 'bottom'});
        }
    }
    return initOptions;
}

调用

drawGridLine('node-reqApi','node-api','left-bottom',{color:'red'});

drawInitLine('node-params','node-sec');

drawSuccessLine('node-params','node-sec');