series.graph(Object)

关系图

用于展现节点以及节点之间的关系数据。

示例：

option.series[0].data.forEach(function (item) { item.x /= 5; item.y /= 5; });

type(string) = ‘graph’

{{ use: partial-coord-sys( seriesType = “graph”, coordSysDefault = “null”, none = true, cartesian2d = true, polar = true, geo = true, calendar = true ) }}

center(Array)

当前视角的中心点

例如：

center: [115.97, 29.71]

zoom(number) = 1

当前视角的缩放比例。

layout(string) = ‘none’

图的布局。

可选：

'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
'circular' 采用环形布局，见示例 Les Miserables，布局相关的配置项见 graph.circular
'force' 采用力引导布局，见示例 Force，布局相关的配置项见 graph.force

circular(Object)

环形布局相关配置

rotateLabel(boolean) = false

是否旋转标签，默认不旋转

force(Object)

力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。

力引导布局的结果有良好的对称性和局部聚合性，也比较美观。

initLayout(string)

进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。

默认不进行任何布局，使用节点中提供的 x， y 作为节点的位置。如果不存在的话会随机生成一个位置。

也可以选择使用环形布局 'circular'。

repulsion(Array|number) = 50

节点之间的斥力因子。

支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大

gravity(number) = 0.1

节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。

edgeLength(Array|number) = 30

边的两个节点之间的距离，这个距离也会受 repulsion。

支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例

// 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
edgeLength: [10, 50]

layoutAnimation(boolean) = true

因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。

friction(number) = 0.6

这个参数能减缓节点的移动速度。取值范围 0 到 1。

但是仍然是个试验性的参数，参见 #11024。

roam(boolean|string) = false

nodeScaleRatio(number) = 0.6

鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放

draggable(boolean) = false

节点是否可拖拽，只在使用力引导布局的时候有用。

edgeSymbol(Array|string) = [‘none’, ‘none’]

边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：

edgeSymbol: ['circle', 'arrow']

edgeSymbolSize(Array|number) = 10

边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。

itemStyle(Object)

{{ use: partial-item-style( prefix = “##”, useColorPalatte = true, hasCallback = true ) }}

lineStyle(Object)

关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。

{{ use: partial-line-style( prefix = “##”, defaultColor = “‘#aaa’”, defaultWidth = 1, defaultOpacity = 0.5, hasCurveness = true ) }}

label(Object)

{{ use: partial-label( prefix = “##”, defaultPosition = “‘inside’”, formatter = true ) }}

edgeLabel(Object)

labelLayout(Object|Function)

emphasis(Object)

高亮状态的图形样式。

scale(boolean) = true

是否开启高亮后节点的放大效果。

blur(Object)

淡出状态的图形样式。开启 emphasis.focus 后有效。

select(Object)

选中状态的图形样式。开启 selectedMode 后有效。

categories(Array)

节点分类的类目，可选。

如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。

name(string)

类目名称，用于和 legend 对应以及格式化 tooltip 的内容。

itemStyle(Object)

该类目节点的样式。

{{ use: partial-item-style( prefix = “###”, useColorPalatte = true ) }}

label(Object)

该类目节点标签的样式。

{{ use: partial-label( prefix = “###”, defaultPosition = “inside”, formatter = true ) }}

emphasis(Object)

该类目节点的高亮状态。

blur(Object)

该类目节点的淡出状态。

select(Object)

该类目节点的选中状态。

autoCurveness(boolean|number|Array) = false

针对节点之间存在多边的情况，自动计算各边曲率，默认不开启。

设置为 true 时，开启自动曲率计算，默认边曲率数组长度为 20，如果两点间边数大于 20，请使用 number 或 Array 设置边曲率数组。

设置为 number 时，表示两点间边曲率数组的长度，由内部算法给出计算结果。

设置为 Array 时，表示直接指定边曲率数组，多边曲率会从数组中直接按顺序选取。

注意： 如果设置 lineStyle.curveness 则此属性失效。

data(Array)

关系图的节点数据列表。

data: [{
    name: '1',
    x: 10,
    y: 10,
    value: 10
}, {
    name: '2',
    x: 100,
    y: 100,
    value: 20,
    symbolSize: 20,
    itemStyle: {
        color: 'red'
    }
}]

注意: 节点的name不能重复。

name(string)

数据项名称。

x(number)

节点的初始 x 值。在不指定的时候需要指明layout属性选择布局方式。

y(number)

节点的初始 y 值。在不指定的时候需要指明layout属性选择布局方式。

fixed(boolean)

节点在力引导布局中是否固定。

value(number|Array)

数据项值。

category(number)

数据项所在类目的 index。

itemStyle(Object)

该节点的样式。

{{ use: partial-item-style( prefix = “###”, useColorPalatte = true ) }}

label(Object)

该节点标签的样式。

emphasis(Object)

该节点的高亮状态。

blur(Object)

该节点的淡出状态。

select(Object)

该节点的选中状态。

nodes(Array)

别名，同 data

links(Array)

节点间的关系数据。示例：

links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]

source(string|number)

边的源节点名称的字符串，也支持使用数字表示源节点的索引。

target(string|number)

边的目标节点名称的字符串，也支持使用数字表示源节点的索引。

value(number)

边的数值，可以在力引导布局中用于映射到边的长度。

lineStyle(Object)

关系边的线条样式。

curveness(number) = 0

边的曲度，支持从 0 到 1 的值，值越大曲度越大。

label(Object)

emphasis(Object)

该关系边的高亮状态。

blur(Object)

该关系边的淡出状态。

select(Object)

该关系边的选中状态。

symbol(Array|string)

边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。

symbolSize(Array|string)

边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。

ignoreForceLayout(boolean) = false

使此边不进行力导图布局的计算。

edges(Array)

别名，同 links

{{ use: partial-marker( prefix = “#”, seriesType = “graph”, hasType = true, hasCoord = true ) }}

{{ use: partial-rect-layout-width-height( defaultLeft = “‘center’”, defaultTop = “‘middle’”, defaultWidth = ‘自适应’, defaultHeight = ‘自适应’ ) }}

#${prefix} show(boolean) = ${defaultShowLabel|default(false)}

是否显示标签。

#${prefix} position(string) = ‘middle’

标签位置，可选：

'start' 线的起始点。
'middle' 线的中点。
'end' 线的结束点。

#${prefix} formatter(string|Function)

{{ use: partial-text-style( prefix = ${prefix} ) }}

itemStyle(Object)

lineStyle(Object)

{{ use: partial-line-style( prefix = “###”, hasCurveness = true ) }}

label(Object)

{{ use: partial-label( prefix = “###”, defaultShow = true, formatter = true ) }}