echarts 关系图动线

 不罗嗦上代码

js

var w = 100,
    h = 33,
    //x = -(w/5),
    //y = (h/6);
    x = 0,
    y = 0;
var jsonData = {
    data: [
        //1列
        {
            name: '节点1节点1节点1节点1',
            value: [0,0],
            itemStyle: {
                normal: {
                    color: '#ED6C2C'
                }
            }
        },
        //2列
        {
            name: '节点2',
            value: [100,25]
        }, {
            name: '节点3',
            value: [100,-25]
        },
        //3列
        {
            name: '节点4',
            value: [200,50]
        }, {
            name: '节点5',
            value: [200,0]
        }, {
            name: '节点6',
            value: [200,-50]
        }
    ],
    links: [
        //1列
        {
            name: '节点3',
            coords: [[100+x,-25+y],[0-x,0-y]]//起始
        },
        {
            name: '节点2',
            coords: [[100+x,25-y],[0-x,0+y]]
        },
        //2列
        {
            name: '节点6',
            coords: [[200+x,-50+y],[100-x,-25-y]]
        },
        {
            name: '节点5',
            coords: [[0-x,0],[200+x,0]]
        },
        {
            name: '',
            coords: [[200+x,50-y],[100-x,25+y]]
        }
    ]
};

option = {
    title: {
        text: 'Graph 简单示例2-2:箭头样式'
    },
    grid: {
        left: '20%',
        right: '20%',
        bottom: '4%',
        top: '4%'
    },
    toolbox: {
        show: true,
        feature: {
            //ko不报错,原因不明
            dataView: {
                show: true,
                readOnly: false,
                //optionToContent: statistics
            },
            restore: {
                //show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    xAxis: {
        type: 'value',
        boundaryGap: false,
        show: false
    },
    yAxis: {
        type: 'value',
        show: false
    },
    tooltip: {},//hover:title
    series: [
        {//关系
            type: 'lines',
            // symbol: ['none', 'none'],
            // symbolSize: ['none', 22],
            coordinateSystem: 'cartesian2d',
            label: {
                show: true,
                position: 'middle'
            },
            lineStyle: {
                normal: {
                    color: '#777777',
                    width: 1,
                    type: 'dashed',
                    opacity: 1,
                    curveness: 0
                    //curveness: -0.1
                }
            },
            effect: {
                show: true,//是否 运动
                trailLength: .1,
                symbol: "image://https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585824156011&di=a8c5a0a2ab7d10f2b812f0443f881d1b&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F97%2F79%2F0456f32aca5d2d2.jpg",
                color: '#777777',
                symbolSize: 22
            },
            data: jsonData.links
        },
        {//数据
            type: 'graph',
            symbol: "rect",//矩形 默认圆形
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            symbolSize: [w, h],
            label: {
                show: true,
                formatter: function (val) {
                    var val = val.name;
                    return val.length > 4 ? val.substr(0, 4) + "..." : val;
                }
            },
            itemStyle: {
                normal: {
                    color: '#24BC9D'
                }
            },
            data: jsonData.data
        }
    ]
};

效果