Echarts关系图-----注释
option = {
title: { text: '人民的名义关系图谱' },
tooltip: {
formatter: function (x) {
return x.data.des;
}
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 80,
roam: true,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
itemStyle: {
normal: {
color: '#4b565b'
}
},
lineStyle: {
normal: {
width: 2,
color: '#4b565b'
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {
}
}
},
data: [
{
name: '侯亮平',
des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '李达康',
des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得有些无情。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '祁同伟',
des: '汉东省公安厅厅长',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '陈岩石',
des: '离休干部、汉东省检察院前常务副检察长。充满正义，平凡而普通的共 产 党人。<br/>对大老虎赵立春，以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中，老人家以耄耋高龄，<br/>义无反顾地背起了炸 药包，在反腐胜利前夕因病去世。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '陆亦可',
des: '汉东省检察院反贪局一处处长',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '高育良',
des: '汉东省省委副书记兼政法委书记。年近六十，是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '沙瑞金',
des: '汉东省省委书记',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '高小琴',
des: '山水集团董事长，是一位叱咤于政界和商界的风云人物，处事圆滑、精明干练。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '高小凤',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '赵东来',
des: '汉东省京州市公安局局长，充满正义，整治恶势力，<br/>在与检察部门的合作中从最初的质疑到之后的通力配合。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '程度',
des: '汉东省京州市公安局光明区分局局长，因犯错误，被李达康书记和赵东来局长点名要清除公安队伍。<br/>但在高小琴的帮助下，祁同伟调他当上了省公安厅办公室副主任。<br/>尽管程度逃避了所有罪责，上面也有人保他，<br/>但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '吴惠芬',
des: '汉东省省委副书记高育良的妻子，汉东大学明史教授。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '赵瑞龙',
des: '副国级人物赵立春的公子哥，官二代，打着老子的旗子，<br/>黑白两道通吃，可谓呼风唤雨，权倾一时。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '赵立春',
des: '副国级领导人，曾经的改革闯将，在权利面前，显得极其渺小。',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '陈海',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '梁璐',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '刘新建',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '欧阳菁',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '吴心怡',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',//自定义图片
symbolSize: 100//自定义图片大小
}, {
name: '蔡成功',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}, {
name: '丁义珍',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',//自定义图片
symbolSize: 100
}
],
links: [
{
source: '高育良',
target: '侯亮平',
name: '师生',
color:'#5e859e',
des: '侯亮平是高育良的得意门生'
}, {
source: '高育良',
target: '祁同伟',
name: '师生'
}, {
source: '赵立春',
target: '高育良',
name: "前领导"
}, {
source: '赵立春',
target: '赵瑞龙',
name: "父子"
}, {
source: '赵立春',
target: '刘新建',
name: "前部队下属"
}, {
source: '李达康',
target: '赵立春',
name: "前任秘书"
}, {
source: '祁同伟',
target: '高小琴',
name: "情人"
}, {
source: '陈岩石',
target: '陈海',
name: "父子"
}, {
source: '陆亦可',
target: '陈海',
name: "属下"
}, {
source: '沙瑞金',
target: '陈岩石',
name: "故人"
}, {
source: '祁同伟',
target: '陈海',
name: "师哥"
}, {
source: '祁同伟',
target: '侯亮平',
name: "师哥"
}, {
source: '侯亮平',
target: '陈海',
name: "同学，生死朋友"
}, {
source: '高育良',
target: '吴惠芬',
name: "夫妻"
}, {
source: '陈海',
target: '赵东来',
name: "朋友"
}, {
source: '高小琴',
target: '高小凤',
name: "双胞胎",
symbolSize: '1'
}, {
source: '赵东来',
target: '陆亦可',
name: "爱慕"
}, {
source: '祁同伟',
target: '程度',
name: "领导"
}, {
source: '高育良',
target: '高小凤',
name: "情人"
}, {
source: '赵瑞龙',
target: '祁同伟',
name: "勾结",
symbolSize: '1',
}, {
source: '李达康',
target: '赵东来',
name: "领导"
}, {
source: '赵瑞龙',
target: '程度',
name: "领导"
}, {
source: '沙瑞金',
target: '李达康',
name: "领导"
}, {
source: '沙瑞金',
target: '高育良',
name: "领导"
}, {
source: '祁同伟',
target: '梁璐',
name: "夫妻"
}, {
source: '吴惠芬',
target: '梁璐',
name: "朋友"
}, {
source: '李达康',
target: '欧阳菁',
name: "夫妻"
}, {
source: '赵瑞龙',
target: '刘新建',
name: "洗钱工具"
}, {
source: '赵瑞龙',
target: '高小琴',
name: "勾结，腐化",
symbolSize: '1'
}, {
source: '赵瑞龙',
target: '高小凤',
name: "腐化"
}, {
source: '吴心怡',
target: '陆亦可',
name: "母女"
}, {
source: '吴心怡',
target: '吴惠芬',
name: "姐妹"
}, {
source: '蔡成功',
target: '侯亮平',
name: "发小"
}, {
source: '蔡成功',
target: '欧阳菁',
name: "举报",
lineStyle: {
normal: {
type: 'dotted',
color: '#000'
}
}
}, {
source: '欧阳菁',
target: '刘新建',
name: "举报",
lineStyle: {
normal: {
type: 'dotted',
color: '#000'
}
}
}, {
source: '刘新建',
target: '赵瑞龙',
name: "举报",
lineStyle: {
normal: {
type: 'dotted',
color: '#000'
}
}
}, {
source: '李达康',
target: '丁义珍',
name: "领导"
}, {
source: '高小琴',
target: '丁义珍',
name: "策划出逃"
}, {
source: '祁同伟',
target: '丁义珍',
name: "勾结"
}, {
source: '赵瑞龙',
target: '丁义珍',
name: "勾结"
}]
}
]
};
var option = {
tooltip: {
show: true, //默认显示
showContent: true, //是否显示提示框浮层
trigger: 'item',//触发类型，默认数据项触发
triggerOn: 'click',//提示触发条件，mousemove鼠标移至触发，还有click点击触发
alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
showDelay: 0,//浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
hideDelay: 200,//浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
enterable: false,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
position: 'right',//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
confine: false,//是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
transitionDuration: 0.4,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
},
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
color:['#4472C5','#ED7C30','#80FF80','#FF8096','#800080','#7288aa'],
legend: { //=========圖表控件
show: true,
textStyle: { //标签的字体样式
color: '#cde6c7', //字体颜色
fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
//fontWeight: 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontFamily: 'sans-serif'//文字的字体系列
},
data: [{
name: '负载',
icon: 'roundRect',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
},
{
name: '中间件',
icon: 'roundRect'
}, {
name: '端口号',
icon: 'circle'
}, {
name: '数据库',
icon: 'pin'
}, {
name: '用户名',
icon: 'roundRect'
}]
},
series: [{
type: 'graph', //关系图
name: "监控管理系统", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
layout: 'circular', // 图的布局。[ default: 'none' ]
// 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
// 'circular' 采用环形布局;'force' 采用力引导布局.
legendHoverLink: true,//是否启用图例 hover(悬停) 时的联动高亮。
hoverAnimation: true,//是否开启鼠标悬停节点的显示动画
coordinateSystem: null,//坐标系可选
xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
yAxisIndex: 0, //y轴坐标
force: { //力引导图基本配置
//initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
repulsion: 200,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity: 0.02,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: 80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
layoutAnimation: true
//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
},
roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
nodeScaleRatio: 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
draggable: false,//节点是否可拖拽，只在使用力引导布局(layout: 'force',)的时候有用。
focusNodeAdjacency: true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
//symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头） 也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
//symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
//symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
//symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']
edgeSymbol: ['none', 'none'],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
edgeSymbolSize: 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
itemStyle: {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
normal: { //默认样式
label: {
show: true
},
borderType: 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
borderColor: 'rgba(255,255,255,0.4)', //设置图形边框为淡金色,透明度为0.4
borderWidth: 0, //图形的描边线宽。为 0 时无描边。
opacity: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis: {//高亮状态
borderType: 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
borderColor: 'rgba(255,255,255,0.4)', //设置图形边框为淡金色,透明度为0.4
borderWidth: 2 //图形的描边线宽。为 0 时无描边。
}
},
lineStyle: { //==========关系边的公用线条样式。
normal: {
color: 'source',
width: '2',
type: 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
curveness: 0.3, //线条的曲线程度，从0到1
opacity: 1
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis: {//高亮状态
width: 10
}
},
label: { //=============图形上的文本标签
normal: {
show: true,//是否显示标签。
position: 'right',//标签的位置。['50%', '50%'] [x,y]
textStyle: { //标签的字体样式
color: '#cde6c7', //字体颜色
fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
fontWeight: 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontFamily: 'sans-serif', //文字的字体系列
fontSize: 12, //字体大小
}
},
emphasis: {//高亮状态
}
},
edgeLabel: {//==============线条的边缘标签
normal: {
show: false
},
emphasis: {//高亮状态
}
},
//别名为nodes name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小
//label:标签样式。
data: [{
id: 0,
category: 0,
name: '101.133.8.88',
symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png',
value: 20,
symbolSize: 70
}, {
id: 1,
category: 1,
name: '192.168.8.88',
symbol: 'rect',
// symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',
value: 20,
symbolSize: 70
}, {
id: 2,
category: 2,
name: '7001',
symbol: 'circle',
value: 20,
symbolSize: 60,
yId: "jvm",
host: "192.168.6.37",
port: "7001",
username: "weblogic",
pwd: "weblogic1"
}, {
id: 3,
category: 2,
name: '7100',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 4,
category: 1,
name: '102.12.33.23',
symbol: 'rect',
// symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',
value: 20,
symbolSize: 70
}, {
id: 5,
category: 2,
name: '7001',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 6,
category: 2,
name: '7100',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 7,
category: 2,
name: '7001',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 8,
category: 1,
name: '101.11.66.6',
symbol: 'rect',
// symbol: 'image://http://127.0.0.1:8080/icon/littleMan_gray1.png',
value: 20,
symbolSize: 70
}, {
id: 9,
category: 2,
name: '7101',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 10,
category: 2,
name: '7101',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 11,
category: 2,
name: '7001',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 12,
category: 2,
name: '7100',
symbol: 'circle',
value: 20,
symbolSize: 60
}, {
id: 13,
category: 3,
name: '192.168.44.44',
symbol: 'circle',
value: 20,
symbolSize: 70
}, {
id: 14,
category: 3,
name: '192.168.33.33',
symbol: 'circle',
value: 20,
symbolSize: 70
}, {
id: 15,
category: 3,
name: '192.168.22.22',
symbol: 'circle',
value: 20,
symbolSize: 70
}, {
id: 16,
category: 4,
name: '55555555555',
symbol: 'circle',
value: 20,
symbolSize: 70,
}],
categories: [ //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
{
name: '负载',
symbol: 'rect',
label: { //标签样式
show : true,
color : '#cde6c7'
}
}, {
name: '中间件',
symbol: 'rect',
label: { //标签样式
show : true,
color : '#cde6c7'
}
}, {
name: '端口号',
symbol: 'roundRect',
label: { //标签样式
show : true,
color : '#cde6c7'
}
}, {
name: '数据库',
symbol: 'roundRect',
label: { //标签样式
show : true,
color : '#cde6c7'
}
}, {
name: '用户名',
symbol: 'roundRect',
label: { //标签样式
show : true,
color : '#cde6c7'
}
}],
links: [ //edges是其别名代表节点间的关系数据。
{
source: 1,
target: 0
}, {
source: 4,
target: 0
}, {
source: 8,
target: 0
}, {
source: 2,
target: 1
}, {
source: 3,
target: 1
}, {
source: 5,
target: 4
}, {
source: 6,
target: 4
}, {
source: 7,
target: 4
}, {
source: 9,
target: 8
}, {
source: 10,
target: 8
}, {
source: 11,
target: 8
}, {
source: 12,
target: 8
}, {
source: 13,
target: 6
}, {
source: 14,
target: 6
}, {
source: 15,
target: 2
}, {
source: 16,
target: 15
}]
}]
};