H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】echart关系连接线的箭头在某些角度下会被遮挡

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, //目标节点,1表示与索引为1的节点进行连接
         //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);

以上代码能直接在echart官网运行
四个箭头仅有两个箭头被展示,其余两个被遮挡。

回答:

矩形的话好像没什么好的办法,只能把箭头放大点

                            edgeSymbolSize: [20, 20],

回答:

请问矩形的话有好的办法吗?

本文地址:H5W3 » 【Web前端问题】echart关系连接线的箭头在某些角度下会被遮挡

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址