SOURCE

window.onload = function () {
    var myChart = echarts.init(document.getElementById('root'));

    //设置点的大小
    var symbolSize = 50;
    //当0时候表示输入起点坐标，其他值输入终点坐标
    var position = 0;
    //起点
    var positionSource;
    //钟点
    var positionTarget;
    //设置判断点击线还是点击点
    var ok = 1;
    //删除数组的索引位置
    var del;

    //关系坐标
    var xydata = [
        [0, 1],
        [1, 2],
        [2, 3]
    ];

    //节点坐标
    var dataArr = [{
        name: 'Boss',
        value: [15, 50],
        symbolSize: symbolSize,
        symbol: "image://http://pic.51yuansu.com/pic/cover/00/05/23/573697661a0a3_610.jpg",
        label:{
            position: 'bottom'
        }
    },
    {
        name: 'No.1',
        value: [-50, 10],
        symbolSize: symbolSize,
        symbol: "image://http://pic.51yuansu.com/pic/cover/00/05/23/573697661a0a3_610.jpg",
        label:{
            position: 'bottom'
        }
    },
    {
        name: 'No.2',
        value: [-55, -70],
        symbolSize: symbolSize,
        symbol: "image://http://pic.51yuansu.com/pic/cover/00/05/23/573697661a0a3_610.jpg",
        label:{
            position: 'bottom'
        }
    },
    {
        name: 'No.3',
        value: [40, -40],
        symbolSize: symbolSize,
        symbol: "image://http://pic.51yuansu.com/pic/cover/00/05/23/573697661a0a3_610.jpg",
        label:{
            position: 'bottom'
        }
    }]

    var links = xydata.map(function (item, i) {
        return {
            source: xydata[i][0],
            target: xydata[i][1]
        };
    });

    var option = {
        title: {
            text: '单节点拖动拓扑图'
        },
        grid: {},
        tooltip:{},
        //定义X轴 
        xAxis: {
            min: -100,
            max: 100,
            type: 'value',
            axisLine: {
                onZero: false
            },
            show: false
        },
        yAxis: {
            min: -100,
            max: 100,
            type: 'value',
            axisLine: {
                onZero: false
            },
            show: false
        },
        series: [{
            //设置id很重要 
            id: 'a',
            //设置为甘特图
            type: 'graph',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            //设置球的大小
            symbolSize: symbolSize,
            label: {
                show: true,
                formatter: function (d, i) {
                    return dataArr[d.dataIndex].name;
                }
            },
            itemStyle: {
                // borderColor: '#22faf7',
                // borderWidth: 3,
                // color: '#123456',
            },
            //设置连线形式为箭头
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            //指定数据数组
            data: dataArr,
            //指定连线方式
            edges: links,
            //指定连线颜色
            lineStyle: {
                normal: {
                    color: '#22faf7'
                }
            },
        }],

    };
    myChart.setOption(option);


    initGraphic();
    //窗口大小改事件
    window.addEventListener('resize', updatePosition);

    //重新定位图形元素方法
    function updatePosition() {
        myChart.setOption({
            graphic: echarts.util.map(dataArr, (item, dataIndex) => {
                return {
                    position: myChart.convertToPixel('grid', item.value),
                };
            })
        });
    }

    //绘制图形元素
    function initGraphic() {
        myChart.setOption({
            graphic: echarts.util.map(dataArr, (item, dataIndex) => {
                return {
                    //圆形
                    type: 'circle',
                    //将坐标转化为像素
                    position: myChart.convertToPixel('grid', item.value),
                    shape: {
                        // 拖动点的大小
                        r: symbolSize / 2 - 5
                    },
                    style: {
                        fill: '#3FA7DC50',
                        borderColor: '#22faf7',
                        borderWidth: 1,
                    },

                    //指定虚拟圈是否可见  false 可见
                    invisible: false,
                    //指定圈被拖拽（可以与不可以）
                    draggable: true,
                    onclick:echarts.util.curry(onPointClicking, dataIndex),
                    ondrag: echarts.util.curry(onPointDragging, dataIndex),
                    onmouseup: echarts.util.curry(onPointDragging, dataIndex),
                    //层级
                    z: 100

                };
            })
        });
    }

    function onPointClicking(dataIndex, dx, dy){
        console.log(dataIndex, dx, dy)
    }

    //图形元素拖动后， 修改节点位置
    function onPointDragging(dataIndex, dx, dy) {
        dataArr[dataIndex].value = myChart.convertFromPixel('grid', this.position);
        // Update data
        myChart.setOption({
            series: [{
                id: 'a',
                data: dataArr
            }]
        });
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>单节点拖动拓扑图demo</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

#root{
    width:600px;
    height:450px;
    background-color: #eee;
}