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

力导向图

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

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

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

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);  
这里是一个在线编辑echarts的网址
http://echarts.baidu.com/gallery/editor.html?c=doc-example/getting-started

好了 现在就可以开始弄自己做出来的图了,下面是效果图

这里写图片描述

这里有两个地方 一个是颜色设置

这里写图片描述
这里设置的时候 ,在nodes节点里push一个属性itemStyle:{normal: {color: ‘#00A600’}} 就行了, 直接写color是不行的, 会被认为参数

links 是控制节点的链接, 在前台可以灵活使用 , 来应对不同的需求

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts是一个基于JavaScript的可视化库,可以用来展示各种表,包括导向。在Echarts导向可以用来展示不同节点之间的关系。 要实现人物关系导向,需要先准备好数据。数据应该包含每个人物的名称、ID以及其与其他人物之间的关系。可以用JSON格式来表示数据,如下所示: ```json { "nodes": [ {"id": "1", "name": "张三"}, {"id": "2", "name": "李四"}, {"id": "3", "name": "王五"}, {"id": "4", "name": "赵六"}, {"id": "5", "name": "钱七"}, {"id": "6", "name": "孙八"} ], "links": [ {"source": "1", "target": "2"}, {"source": "1", "target": "3"}, {"source": "2", "target": "4"}, {"source": "3", "target": "4"}, {"source": "4", "target": "5"}, {"source": "4", "target": "6"} ] } ``` 上面的数据表示了6个人物之间的关系,其节点表示人物,links表示人物之间的关系。source和target表示连接的两个节点的ID。 接下来,我们需要使用Echarts来展示这个导向。首先,需要引入Echarts的库文件: ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` 然后,创建一个<div>元素,并给它一个ID,作为表的容器: ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 接下来,使用JavaScript代码来绘制导向: ```javascript var myChart = echarts.init(document.getElementById('chart')); var option = { series: [{ type: 'graph', layout: 'force', symbolSize: 50, roam: true, label: { show: true }, data: data.nodes, links: data.links, force: { repulsion: 1000, edgeLength: 50 } }] }; myChart.setOption(option); ``` 上面的代码,首先创建了一个Echarts实例,并指定了表的容器。然后,定义了一个option对象,其包含了导向的各种参数。其,type为'graph'表示是一个导向,layout为'force'表示使用导向布局,symbolSize表示节点的大小,roam表示开启拖拽和缩放功能,label为节点的标签,data和links分别表示节点和边的数据,force表示导向布局的参数,repulsion表示节点之间的斥,edgeLength表示边的长度。 最后,使用setOption方法将option应用到,即可显示人物关系导向

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值