option = {
tooltip: {
show: true, // 默认显示
showContent: true, // 是否显示提示框浮层
trigger: 'item', // 触发类型，默认数据项触发
triggerOn: 'mousemove', // 提示触发条件，mousemove鼠标移至触发，还有click点击触发
alwaysShowContent: false, // 默认离开提示框区域隐藏，true为一直显示
showDelay: 100, // 浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
hideDelay: 2000, // 浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
position: 'right', // 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
confine: false, // 是否将 tooltip 框限制在图表的区域内。
// 外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间，单位是秒，设置为 0 的时候会紧跟着鼠标移动。
},
legend: { // 图例显示（显示在右上角），name:类别名称，icon:图例的形状（默认是roundRect圆角矩形）。
show: true,
data: [{
name: '教会人员'
},
{
name: '世俗贵族'
},
{
name: '公务人员'
},
{
name: '其他人员'
},
{
name: '银行'
}
]
},
series: [{
type: 'graph', // 关系图
name: 'Name:', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
layout: 'force', // 图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画
coordinateSystem: null, // 坐标系可选
xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
yAxisIndex: 0, // y轴坐标
force: { // 力引导图基本配置
// initLayout: , // 力引导的初始化布局，默认使用xy轴的标点
repulsion: 500, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity: 0.02, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: 200, // 边的两个节点之间的距离，这个距离也会受 repulsion影响 。值越大则长度越长
layoutAnimation: true // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
// 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
},
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启，true 为都开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'
nodeScaleRatio: 0.6, // 鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
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(205, 149, 12, 0.4)', // 设置图形边框为淡金色,透明度为0.4
borderWidth: 2, // 图形的描边线宽。为 0 时无描边。
opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis: { // 高亮状态
}
},
lineStyle: { // ========关系边的公用线条样式。
normal: {
color: 'rgba(255, 0, 255, 0.4)',
width: '1', //线的粗细
type: 'solid', // 线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
curveness: 0.3, // 线条的曲线程度，从0到1
opacity: 0.5 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis: { // 高亮状态
}
},
label: { // ========结点图形上的文本标签
normal: {
show: true, // 是否显示标签。
position: 'inside', // 标签的位置。['50%', '50%'] [x,y]
textStyle: { // 标签的字体样式
color: '#d3d7d4', // 字体颜色 #cde6c7 #d1c7b7 #d9d6c3 #d3d7d4
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 // 不显示连接线上的文字，如果显示只能显示结点的value值，而不是连接线的值
},
emphasis: { // 高亮状态
}
},
categories: [ // name(类别名称)要同legend(图例）按次序一致
{
name: '教会人员'
},
{
name: '世俗贵族'
},
{
name: '公务人员'
},
{
name: '其他人员'
},
{
name: '银行'
}
],
// 设置结点node的数据
// category: 类别序号，从0开始
// name: 结点图形显示的文字
// value: 鼠标点击结点，显示的数字
// symbolSize: 结点图形的大小
// symbol: 类目节点标记图形，默然为圆形
// label: 标签样式
data: [{
category: '银行',
name: 'The Rome Branch',
value: 2000,
symbolSize: 200
},
{
category: '教会人员',
name: 'Cardinal Alfonso de Carillo',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Lodovico de Verme',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Messer Filippo',
value: 250,
symbolSize: 25
},
{
category: '教会人员',
name: 'Articinodella Porta',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Branda da Castiglione',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Oddo Poccia de Varris da Genazzano',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Cardinal Francesco Lando',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Henry Beaufort',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Cardinal Brancaccio',
value: 500,
symbolSize: 50
},
{
category: '教会人员',
name: 'Pope Martin V',
value: 1000,
symbolSize: 100
},
{
category: '教会人员',
name: 'Bartolomeo de’ Bardi',
value: 500,
symbolSize: 50
},
{
category: '世俗贵族',
name: 'Antonio Colonna',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Jacopo dal Verme',
value: 125,
symbolSize: 13
},
{
category: '世俗贵族',
name: 'Fabrizio I Duke of Paliano, Grand Constable of Naples',
value: 500,
symbolSize: 50
},
{
category: '世俗贵族',
name: 'John of Gaunt',
value: 500,
symbolSize: 50
},
{
category: '世俗贵族',
name: 'Giordano Colonna',
value: 1000,
symbolSize: 100
},
{
category: '教会人员',
name: 'Antipope John XXIII',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Filippo Visconti, Duke of Milan',
value: 500,
symbolSize: 50
},
{
category: '世俗贵族',
name: 'Fredrick III, Holy Roman Emperor',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Henry VI',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Joanna II, Queen of Naples',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Cosimo de Medici',
value: 1000,
symbolSize: 100
},
{
category: '教会人员',
name: 'Pope Gregory XII',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Isabella of Castille',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Muzio Sforza',
value: 500,
symbolSize: 50
},
{
category: '世俗贵族',
name: 'Sigismund of Luxemberg',
value: 1000,
symbolSize: 100
},
{
category: '世俗贵族',
name: 'Gherardo Appiani, Lord of Piombino',
value: 1000,
symbolSize: 100
},
{
category: '其他人员',
name: 'Lorenzo Onofrio Colonna',
value: 125,
symbolSize: 13
},
{
category: '其他人员',
name: 'Albato Scienche',
value: 125,
symbolSize: 13
},
{
category: '其他人员',
name: 'Giovanni d’ Orlando da Genazzano',
value: 250,
symbolSize: 25
},
{
category: '其他人员',
name: 'Paolo da Sulmona',
value: 250,
symbolSize: 25
},
{
category: '其他人员',
name: 'Agnolo Massi da Genazzano',
value: 250,
symbolSize: 25
},
{
category: '其他人员',
name: 'Master Johannes Tronar',
value: 125,
symbolSize: 13
},
{
category: '其他人员',
name: 'Messer Tomaso Ciopen',
value: 125,
symbolSize: 13
},
{
category: '公务人员',
name: 'Alessandro Tagliamilo of Naples',
value: 125,
symbolSize: 13
},
{
category: '公务人员',
name: 'Giovanni degli Annibaldi',
value: 125,
symbolSize: 13
},
{
category: '公务人员',
name: 'Hermann Dwerg (Duverche)',
value: 125,
symbolSize: 13
},
],
links: [ // 设置连线edges的数据
{
source: 'The Rome Branch',
target: 'Cardinal Alfonso de Carillo',
value: 38
},
{
source: 'The Rome Branch',
target: 'Lodovico de Verme',
value: 14
},
{
source: 'The Rome Branch',
target: 'Messer Filippo',
value: 14
},
{
source: 'The Rome Branch',
target: 'Articinodella Porta',
value: 9
},
{
source: 'The Rome Branch',
target: 'Branda da Castiglione',
value: 13
},
{
source: 'The Rome Branch',
target: 'Oddo Poccia de Varris da Genazzano',
value: 6
},
{
source: 'The Rome Branch',
target: 'Cardinal Francesco Lando',
value: 11
},
{
source: 'The Rome Branch',
target: 'Henry Beaufort',
value: 9
},
{
source: 'The Rome Branch',
target: 'Cardinal Brancaccio',
value: 21
},
{
source: 'The Rome Branch',
target: 'Pope Martin V',
value: 3
},
{
source: 'The Rome Branch',
target: 'Bartolomeo de’ Bardi',
value: 56
},
{
source: 'The Rome Branch',
target: 'Antonio Colonna',
value: 3
},
{
source: 'The Rome Branch',
target: 'Hermann Dwerg (Duverche)',
value: 7
},
{
source: 'The Rome Branch',
target: 'Giovanni degli Annibaldi',
value: 7
},
{
source: 'The Rome Branch',
target: 'Albato Scienche',
value: 7
},
{
source: 'The Rome Branch',
target: 'Giovanni d’ Orlando da Genazzano',
value: 6
},
{
source: 'The Rome Branch',
target: 'Paolo da Sulmona',
value: 6
},
{
source: 'The Rome Branch',
target: 'Agnolo Massi da Genazzano',
value: 5
},
{
source: 'The Rome Branch',
target: 'Master Johannes Tronar',
value: 5
},
{
source: 'The Rome Branch',
target: 'Alessandro Tagliamilo of Naples',
value: 5
},
{
source: 'The Rome Branch',
target: 'Messer Tomaso Ciopen',
value: 5
},
{
source: 'Cardinal Alfonso de Carillo',
target: 'Pope Martin V',
value: 3
},
{
source: 'Cardinal Alfonso de Carillo',
target: 'Isabella of Castille',
value: 5
},
{
source: 'Lodovico de Verme',
target: 'Jacopo dal Verme',
value: 10
},
{
source: 'Lodovico de Verme',
target: 'Filippo Visconti, Duke of Milan',
value: 5
},
{
source: 'Lodovico de Verme',
target: 'Muzio Sforza',
value: 4
},
{
source: 'Messer Filippo',
target: 'Pope Martin V',
value: 3
},
{
source: 'Antonio Colonna',
target: 'Fabrizio I Duke of Paliano, Grand Constable of Naples',
value: 10
},
{
source: 'Antonio Colonna',
target: 'Pope Martin V',
value: 10
},
{
source: 'Antonio Colonna',
target: 'Lorenzo Onofrio Colonna',
value: 10
},
{
source: 'Articinodella Porta',
target: 'Pope Martin V',
value: 3
},
{
source: 'Hermann Dwerg (Duverche)',
target: 'Pope Martin V',
value: 7
},
{
source: 'Giovanni degli Annibaldi',
target: 'Franceso Annibaldi',
value: 10
},
{
source: 'Giovanni degli Annibaldi',
target: 'Pope Martin V',
value: 3
},
{
source: 'Giovanni d’ Orlando da Genazzano',
target: 'Pope Martin V',
value: 1
},
{
source: 'Branda da Castiglione',
target: 'Boniface IX',
value: 6
},
{
source: 'Branda da Castiglione',
target: 'Sigismund of Luxemberg',
value: 8
},
{
source: 'Oddo Poccia de Varris da Genazzano',
target: 'Pope Martin V',
value: 8
},
{
source: 'Paolo da Sulmona',
target: 'Fredrick III, Holy Roman Emperor',
value: 1
},
{
source: 'Agnolo Massi da Genazzano',
target: 'Pope Martin V',
value: 1
},
{
source: 'Agnolo Massi da Genazzano',
target: 'Gherardo Appiani, Lord of Piombino',
value: 1
},
{
source: 'Cardinal Francesco Lando ',
target: 'Antipope John XXIII',
value: 5
},
{
source: 'Henry Beaufort',
target: 'John of Gaunt',
value: 10
},
{
source: 'Henry Beaufort',
target: 'Henry VI',
value: 9
},
{
source: 'Henry Beaufort',
target: 'Pope Martin V',
value: 7
},
{
source: 'Alessandro Tagliamilo of Naples',
target: 'Joanna II, Queen of Naples',
value: 3
},
{
source: 'Cardinal Brancaccio',
target: 'Antipope John XXIII',
value: 6
},
{
source: 'Cardinal Brancaccio',
target: 'Pope Martin V',
value: 6
},
{
source: 'Pope Martin V',
target: 'Giordano Colonna',
value: 10
},
{
source: 'Pope Martin V',
target: 'Antipope John XXIII',
value: 9
},
{
source: 'Pope Martin V',
target: 'Pope Gregory XII',
value: 5
},
{
source: 'Bartolomeo de’ Bardi',
target: 'Contessina de’ Bardi',
value: 9
},
{
source: 'Bartolomeo de’ Bardi',
target: 'Cosimo de Medici',
value: 7
},
{
source: 'The Rome Branch',
target: 'Bartolomeo de’ Bardi',
value: 7
},
{
source: 'The Rome Branch',
target: 'Cosimo de Medici',
value: 7
}
]
}]
};