官网案例: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="width:100%; height: 100%; top: 0px; position: absolute;"></div>
</div>

echarts实现group关系图案例的更多相关文章

  1. Echarts图表插件(4.x版本)使用(二、带分类筛选的多个图表/实例化多个ECharts,以关系图/force为例)

    导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...

  2. react中使用echarts(人物关系图)

    项目中有时会用到echarts,可能不同的框架中语法稍有变通,前几天在react项目中遇到,写此篇以作记录. 不同的charts语法跟支持不同,本篇"echarts": " ...

  3. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  4. Python 爬取 热词并进行分类数据分析-[热词关系图+报告生成]

    日期:2020.02.05 博客期:144 星期三 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入] c.[拓扑 ...

  5. Echarts关系图-力引导布局

    需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...

  6. Echarts数据可视化series-graph关系图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. 转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

    站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...

  8. Echarts 关系图 添加点击事件

    /*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...

  9. hadoop下生成echarts关系图

    数据 O700 O2833 O700 O331 O700 O3425 O700 O350 O700 O3516 O700 O3826 读取文件类 public class FileReadFromHd ...

随机推荐

  1. 【算法】BSGS算法

    BSGS算法 BSGS算法用于求解关于x的模方程\(A^x\equiv B\mod P\)(P为质数),相当于求模意义下的对数. 思想: 由费马小定理,\(A^{p-1}\equiv 1\mod P\ ...

  2. PHP中header头设置Cookie与内置setCookie的区别

    首先声明,浏览的Cookie操作都是通过HTTP Header(俗称“Http头”) 来实现.所有的服务器与客户端之间Cookie数据传输都是通过Http请求头来操作. PHP中setCookie(函 ...

  3. A - Archery Tournament 动态开点+vecotor 神仙题

    存图还是像矩形一样的存,每个节点存所在区级内部的圆的编号,然后暴力判断,开始我也有这个想法,但是...这TM也能过...仔细想想,貌似好像是可以过,时间复杂度玄学无法证明.... #include&l ...

  4. oracle函数 trunc(x[,y])

    [功能]返回x按精度y截取后的值 [参数]x,y,数字型表达式,如果y不为整数则截取y整数部分,如果y>0则截取到y位小数,如果y小于0则截取到小数点向左第y位,小数前其它数据用0表示. [返回 ...

  5. 从开源小白到 Apache Member,我的成长之路

    我们走过的每一步路,都会留下印记,越坚实,越清晰. 近日,Apache 软件基金会(ASF)官方 Blog 宣布全球新增 40 位 Apache Member,张乎兴有幸成为其中一位. 目前,全球共有 ...

  6. 模板—插头dp(Ural 1519 Formula 1)

    括号表示法: 据说比下一个要快而且灵活. #include<iostream> #include<cstring> #include<cstdio> #define ...

  7. P2993 [FJOI2014]最短路径树问题 点分治+最短路

    这道题还是非常简单的,由于我们要保证最小字典序,因此我们需要把边进行排序,然后从大到小插入,因为链式前向星是倒着存的.我们只需要先跑一个最短路,然后查询边是不是在最短路上,这个可以通过枚举边并用 di ...

  8. ORA错误查询手册

    ORA-00910: 指定した長さがデータ型に対して長すぎます 原因: データ型CHARまたはRAWに対して指定した長さは.2000を超える値または4000を超える値であるため無効です. 処置: 指定 ...

  9. PHP导入导出Excel方法小结

    基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只是因为Excel的兼容能力强,能够正确打开而已.修改这种文件后再保存,通常会提示你是否要转换成Excel文件 ...

  10. jq实现超级简单的隔行变色

    文章地址:https://www.cnblogs.com/sandraryan/ <!DOCTYPE html> <html lang="en"> < ...