The arrowhead of the echart relationship connection line will be obscured at certain angles

myChart.showLoading ();

var symbolCenter= ["arrow", ""];
var symbolOuter= ["", "arrow"];
var webkitDep = {
"type": "force",
"categories": [//
    {
        "name": "",//
        "keyword": {},
        "base": ""
    }
],
"nodes": [//
    {
        "name": "",//
        "value": 3,
        "category": 0,//0
        
    },
    {
        "name": "",
        "value": 1,
        "category": 0
    },
    {
        "name": "",
        "value": 1,
        "category": 0
    },
    {
        "name": "",
        "value": 1,
        "category": 0
    },
    {
        "name": "",
        "value": 1,
        "category": 0
    }
],
"links": [//
    {
        "source": 0,//0
        "target": 1, //11
         //edgeSymbol: ["arrow", ""],
        "symbol": symbolCenter
    },
    {
        "source": 0,
        "target": 2,
        "symbol": symbolCenter
    },
    {
        "source": 0,
        "target": 3,
        "symbol": symbolOuter
    },
    {
        "source": 0,
        "target": 4,
        "symbol": symbolOuter
    }
]

};

myChart.hideLoading();

option = {
    legend: {
        data: [""]//name
    },
    series: [{
        type: "graph",
        layout: "force",
        animation: false,
        label: {
            normal: {
                show:true,
                position: "right"
            }
        },
        data: webkitDep.nodes.map(function (node, idx) {
            node.id = idx;
            node.symbol = "rect",
            node.symbolSize = [100,60]
            return node;
        }),
        markPoint:{
          symbolOffset:["-20%",0],
          symbolSize:60
        },
        categories: webkitDep.categories,
        force: {
            edgeLength: 300,//
            repulsion: 1000 //
        },
        edges: webkitDep.links
    }]
};
myChart.setOption(option);

the above code can run directly on the echart official website.
four arrows are displayed only two arrows are displayed, and the other two are obscured.

Jun.30,2022

there seems to be no good way for a rectangle. We can only enlarge the arrow

.
                            edgeSymbolSize: [20, 20],

is there a good way to talk about rectangles?


image.png set the offset arrow to show

Menu