echarts实现group关系图案例

官网案例：https://www.echartsjs.com/examples/zh/editor.html?c=graph-simple

  

自己在项目中实现了两个group图：

1.先看实现效果，两个数据量不同，代码基本上相同

   

    

 2.实现代码

2.1.后台代码的实现，主要实现节点和关系线的封装，注意：nodes.name不能重复，图形中显示的是nodes.value值

group图的数据结构如下：

{
"nodes":[
　　{
　　"name":"1210089292475469826",
　　"value":"网状结果指标"
}
],
"links":[
　　{
　　"dec":"权重：0.1",
　　"source":"1210089292991369218",
　　"target":"1210089292857151490"
　　}
]
}

2.2.后台实现封装，通过map和list集合完成数据封装，根据自己的业务获取数据即可

Map<String, Object> map = new HashMap<>();

List<Map<String, Object>> nodes = new ArrayList<>();
List<Map<String, Object>> links = new ArrayList<>();

Map<String, Object> sf = new HashMap<>();
sf.put("value","value值" );
sf.put("name", "name值");
sf.put("category", 3);
nodes.add(sf);
Map<String, Object> sflink = new HashMap<>();
sflink.put("source", mx.get("name"));
sflink.put("target", sf.get("name"));
sflink.put("weight", 1);
links.add(sflink);

       map.put("nodes", nodes);
       map.put("links", links);
       return map;

2.3.js部分代码（第二个图为例）

var nodes = result.nodes;
var links = result.links;
var myChart = echarts.init(document.getElementById('main'));

var categoryArray = [{name: "对象"}, {name: "任务"}, {name: "方案"}, {name: "模型"}, {name: "数据集"}]
var graph = {"categories": categoryArray, "nodes": nodes, "links": links}

// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));

var option = {
    title: {
        //text: dxm + "的关联分析",//标题
        top: 'top',//相对在y轴上的位置
        left: 'center'//相对在x轴上的位置
    },
    tooltip: {//提示框，鼠标悬浮交互时的信息提示
        trigger: 'item',//数据触发类型
        formatter: function (params) {//触发之后返回的参数，这个函数是关键
            if (params.data.dec != undefined) {//如果触发节点
                return params.data.dec;//返回标签
            } else {//如果触发边value
                // return '关系:'+params.data.dec;
            }
        },
    },
    //工具箱，每个图表最多仅有一个工具箱
    toolbox: {
        show: true,
        feature: {//启用功能
            //dataView数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
            // dataView: {show: true, readOnly: true},
            restore: {show: true},//restore，还原，复位原始图表
            saveAsImage: {show: true}//saveAsImage，保存图片
        }
    },
    //全局颜色，图例、节点、边的颜色都是从这里取，按照之前划分的种类依序选取
    color: ['#EE6A50', '#4F94CD', '#B3EE3A', '#DAA520', '#DA41CE'],
    //图例，每个图表最多仅有一个图例
    legend: [{
        x: 'left',//图例位置
        orient: 'vertical',  //垂直显示
        //图例的名称，这里返回短名称，即不包含第一个，当然你也可以包含第一个，这样就可以在图例中选择主干人物
        data: categoryArray.map(function (a) {
            return a.name;
        })
    }],
    //sereis的数据: 用于设置图表数据之用
    series: [
        {
            //name: dxm + "的关联分析",//系列名称
            type: 'graph',//图表类型
            layout: 'force',//echarts3的变化，force是力向图，circular是和弦图
            draggable: true,//指示节点是否可以拖动
            data: nodes,//节点数据
            links: links,//边、联系数据
            categories: categoryArray,//节点种类

　　　　　　　edgeSymbol: ['circle', 'arrow'],//线上箭头，第一个图的            focusNodeAdjacency: true,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点            roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

            label: {//图形上的文本标签，可用于说明图形的一些数据信息
                normal: {
                    show: true,//显示
                    position: 'right',//相对于节点标签的位置
                    //回调函数，你期望节点标签上显示什么
                    formatter: function (params) {
                        return params.data.value;
                    },
                }
            },
            //节点的style
            itemStyle: {
                normal: {
                    opacity: 0.9,//设置透明度为0.8，为0时不绘制
                },
            },
            // 关系边的公用线条样式
            lineStyle: {
                normal: {
                    show: true,
                    color: 'target',//决定边的颜色是与起点相同还是与终点相同
                    curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                }
            },
            force: {
                edgeLength: [100, 200],//线的长度，这个距离也会受 repulsion，支持设置成数组表达边长的范围
                repulsion: 100//节点之间的斥力因子。值越大则斥力越大
            }
        }
    ]
};
myChart.setOption(option);

2.4 html部分代码，一个div指定id即可

 <div id="main"
         style="100%; height: 100%; top: 0px; position: absolute;"></div>
</div>