官网案例: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. matlab播放音乐

    最近在做计算,写了一些matlab代码,脑壳还疼,所以决定发挥一下逗B精神,写一个程序玩一下. 想了想,既然写代码的时候喜欢听歌,而且我的电脑打开网易音乐的速度巨慢(不知道为什么..),那些一个程序直 ...

  2. Delphi编译dll时出错"Cannot debug project unless a host application is defined.use the run|parameters...dialog box."

    问题: 在编写DLL程序的时候,按下F9或者按下那个绿色的箭头,会报错,如下 原因: 是因为你按下的F9或者那个绿色箭头是表示“Run”这个程序,但是DLL不是可执行文件,所以当然不能够运行,所以就会 ...

  3. SqlSever基础 datediff 计算人的生日是不准确的,示例

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. BZOJ 1022 小约翰的游戏

    Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取 ...

  5. jQuery的touchstart,touchmove,touchend的获取位置

    $('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; v ...

  6. .net写本地文件的一个方法

    整理代码,.net在本地写html文件的一个方法,代码如下 public static void WriteFile(string FilePath, string FileInfo, string ...

  7. 多进程+协程 处理IO问题

    from multiprocessing import Pool import gevent,os import time def recursion(n): if n == 1 or n ==2: ...

  8. Solr 数字字符不能搜索的一个问题

    问题一: 测试人员告诉我数字不能被搜索.于是开始找原因: <fields> ***<field name="productName" type="tex ...

  9. 献上一款漂亮的手写PHP验证码

    献上一款漂亮的PHP验证码,可以根据个人需求作调整,代码如下(审美观不同,欢迎吐槽): <?php /** * Author: xiongwei * Email: 695704253@qq.co ...

  10. ant安装配置

    点击进入ant官网,找到下载选项. 选择下载安装文件.其余的源文件和手册的下载步骤完全相同. 可以下载官网上对应系统的最新版本.也可以在old ant 版本中选择自己需要的版本.笔者需要ant-1.9 ...