关于echarts中的关系图,力导向图的编写

最新推荐文章于 2024-05-28 11:11:34 发布

放开那个桃子

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量8.4k

点赞数 3

本文链接：https://blog.csdn.net/qq_33505051/article/details/78102905

版权

力导向图

之前要求改写个树状图的展示方式, 想改成关系图 , 但是去官网看例子没有那么好的来符合, 在网上找资料也不是很对胃口, 花了很多时间研究了一下 ,写下这篇给自己以后在用到的时候看吧

先是一个小例子,在网上找的,是用它改写的

这是我经过小修改之后的代码:

myChart.showLoading();  
    var webkitDep = {  
    "type": "force",  
    "categories": [//关系网类别，可以写多组  
        {  
            "name": "网格关系",//关系网名称  
            "keyword": {},  
            "base": "网格关系"  
        }  
    ],  
    "nodes": [//展示的节点  
        {  
            "name": "父节点",//节点名称  
            "value": 3,  
            "category": 0//与关系网类别索引对应，此处只有一个关系网所以这里写0  
        },  
        {  
            "name": "二级父节点1",  
            "value": 8,  
            "category": 0  
        },  
        {  
            "name": "二级父节点2",  
            "value": 10,  
            "category": 0  
        },  
        {  
            "name": "子节点1",  
            "value": 10,  
            "category": 0  
        },  
        {  
            "name": "子节点2",  
            "value": 110,  
            "category": 0  
        },  
        {  
            "name": "子节点3",  
            "value": 100,  
            "category": 0  
        },  
        {  
            "name": "子节点4",  
            "value": 1000,  
            "category": 0  
        }          
    ],  
    "links": [//节点之间连接  
        {  
            "source": 0,//起始节点，0表示第一个节点  
            "target": 1 //目标节点，1表示与索引为1的节点进行连接  
        },  
        {  
            "source": 0,  
            "target": 2  
        },  
        {  
            "source": 1,  
            "target": 3  
        },  
        {  
            "source": 1,  
            "target": 4  
        },  
        {  
            "source": 2,  
            "target": 5  
        },  
        {  
            "source": 2,  
            "target": 6  
        }  
    ]  
};  
    myChart.hideLoading();  

    option = {  
        legend: {  
            data: ['网格关系']//此处的数据必须和关系网类别中name相对应  
        },  
        series: [{  
            type: 'graph',  
            layout: 'force',  
            animation: false,  
            label: {  
                normal: {  
                    show:true,  
                    position: 'right'  
                }  
            },  
            draggable: true,  
            data: webkitDep.nodes.map(function (node, idx) {  
                node.id = idx;  
                return node;  
            }),  
            categories: webkitDep.categories,  
            force: {  
                edgeLength: 105,//连线的长度  
                repulsion: 100  //子节点之间的间距  
            },  
            edges: webkitDep.links  
        }]  
    };  
    myChart.setOption(option);