|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
options |
图谱配置，一个对象，里面包含了具体的选项：
|
Object
|
是
|
|
|
options.backgrounImage
|
图谱水印url,如：http://ai-mark.cn/images/ai-mark-desc.png
|
string
|
否
|
|
|
options.backgrounImageNoRepeat
|
只在右下角显示水印，不重复显示水印
|
boolean
|
否
|
true
|
|
options.allowShowMiniToolBar
|
是否显示工具栏
|
boolean
|
否
|
true
|
|
options.allowShowMiniView
|
是否显示缩略图
|
boolean
|
否
|
false
|
|
options.allowShowMiniNameFilter
|
是否显示搜索框
|
boolean
|
否
|
true
|
|
options.allowSwitchLineShape
|
是否在工具栏中显示切换线条形状的按钮
|
boolean
|
否
|
true
|
|
options.allowSwitchJunctionPoint
|
是否在工具栏中显示切换连接点位置的按钮
|
boolean
|
否
|
false
|
|
options.disableZoom
|
是否禁用图谱的缩放功能，这里特指通过鼠标滚轮进行缩放的功能，禁用后你依然可以通过图谱工具栏按钮进行缩放
|
boolean
|
否
|
false
|
|
options.disableDragNode
|
是否禁用图谱中节点的拖动
|
boolean
|
否
|
false
|
|
options.moveToCenterWhenResize
|
当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
|
boolean
|
否
|
true
|
|
options.defaultFocusRootNode
|
默认为根节点添加一个被选中的样式
|
boolean
|
否
|
true
|
|
options.allowShowZoomMenu
|
是否在右侧菜单栏显示放大缩小的按钮，此设置和disableZoom不冲突
|
boolean
|
否
|
true
|
|
options.isMoveByParentNode
|
是否在拖动节点后让子节点跟随
|
boolean
|
否
|
false
|
|
options.hideNodeContentByZoom
|
是否根据缩放比例隐藏节点内容
|
boolean
|
否
|
false
|
|
options.defaultNodeShape
|
默认的节点形状，0:圆形；1:矩形
|
int
|
否
|
1
|
|
options.defaultNodeColor
|
默认的节点背景颜色
|
string
|
否
|
|
|
options.defaultNodeFontColor
|
默认的节点文字颜色
|
string
|
否
|
|
|
options.defaultNodeBorderColor
|
默认的节点边框颜色
|
string
|
否
|
|
|
options.defaultNodeBorderWidth
|
默认的节点边框粗细（像素）
|
int
|
否
|
1
|
|
options.defaultNodeWidth
|
默认的节点宽度
|
int
|
否
|
自动
|
|
options.defaultNodeHeight
|
默认的节点高度
|
int
|
否
|
自动
|
|
options.defaultJunctionPoint
|
默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
|
string
|
否
|
自动
|
|
options.defaultExpandHolderPosition
|
默认的节点展开/关闭按钮位置（left/top/right/bottom）
|
string
|
否
|
hide
|
|
options.defaultLineColor
|
默认的线条颜色
|
string
|
否
|
|
|
options.defaultLineWidth
|
默认的线条粗细（像素）
|
int
|
否
|
1
|
|
options.defaultLineShape
|
默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
|
int
|
否
|
|
|
options.defaultLineMarker
|
默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
|
Object
|
否
|
|
|
options.defaultShowLineLabel
|
默认是否显示连线文字
|
boolean
|
否
|
true
|
|
options.layouts
|
布局方式，可以设置多个布局，用于切换查看布局参数配置说明
|
Object/Array
|
否
|
中心布局
|
|
on-node-click
|
标签参数：点击节点时触发的方法，参数：(nodeObject, $event)
|
function
|
否
|
|
|
on-line-click
|
标签参数：点击连线时触发的方法，参数：(lineObject, $event)
|
function
|
否
|
|
属性名
|
说明
|
|---|---|
|
graphSetting
|
图片会根据options生成一个包含默认值的完整配置对象，它就是graphSetting，可以通过this.$refs.seeksRelationGraph.graphSetting来获取；你还可以从这个对象中获取当前图谱的可见区域大小、画布大小、画布偏移量、当前布局器等运行时对象。
|
|
事件名
|
说明
|
参数
|
|---|---|---|
|
setOptions(options, callback)
|
设置/重新设置图谱的选项,options：图谱选项,不能为空;callback:当设置完成后的回调函数,可以为空;options选项设置方法示例：<SeeksRelationGraph
ref="seeksRelationGraph" :options="userGraphSetting" />
更改设置：seeksRelationGraph.setOptions(newOptions,
callback);
|
|
|
setJsonData(jsonData, callback)
|
设置/重新设置图谱中的数据,jsonData：图谱数据,不能为空，jsonData中需要包含三要素（rootId、nodes、links）数据格式示例;callback:当设置完成后的回调函数,可以为空;
|
|
|
appendJsonData(jsonData, callback)
|
向图谱中追加数据,jsonData：图谱数据,不能为空，数据格式示例;callback:当设置完成后的回调函数,可以为空;
|
|
|
refresh() |
刷新布局，你可以通过getNodes()获取当前图谱中的节点，并通过节点的isHide属性隐藏一些节点，再调用refresh()方法可以根据依然显示的节点重新布局图谱;或者在动态向图谱中添加数据候刷新布局;当你的图片默认默认状态是不可见的时，在切换到可见状态下后可能会显示不正常，这时你调用一下refresh()方法可以让图片正确显示。总之一句话：当图谱中的节点看起来不正常时，你都可以调用refresh方法来让布局器重新为节点分配位置。
|
|
|
focusRootNode()
|
选中图谱的根节点居中并选中;
|
|
|
focusNodeById(nodeId)
|
根据节点id在图谱中选中该节点并居中;
|
|
|
getNodeById(nodeId)
|
根据节点id获取节点对象;
|
|
|
removeNodeById(nodeId)
|
移除指定id对应的节点，彻底移除，移除element和数据对象;
|
|
|
downloadAsImage(format)
|
下载图片，将当前图谱导出为图片，format可以为：png/jpg，默认为png;
|
|
|
getNodes() |
获取图谱中所有的节点对象，可以直接修改该对象的属性，这些对象不能用于JSON序列化;
|
|
|
getLines() |
获取图谱中所有的连线对象，可以直接修改该对象的属性，这些对象不能用于JSON序列化;
|
|
|
getGraphJsonData()
|
获取当前图谱的节点、关系数据的json数据;
|
|
|
getGraphJsonOptions()
|
获取当前图谱的完整的配置信息;
|
|
事件名
|
说明
|
参数
|
|---|---|---|
|
on-node-click
|
点击节点事件，注意：请使用<graph
:on-node-click=functionName />的方式来绑定节点事件,使用示例
|
(nodeObject, $event)
|
|
on-node-expand
|
展开节点事件，仅当节点的【展开/收缩】按钮可用时有效，注意：请使用<graph
:on-node-expand=functionName />的方式来绑定事件,使用示例
|
(nodeObject, $event)
|
|
on-node-collapse
|
收缩节点事件，仅当节点的【展开/收缩】按钮可用时有效，注意：请使用<graph
:on-node-collapse=functionName />的方式来绑定事件,使用示例
|
(nodeObject, $event)
|
|
on-line-click
|
点击线条事件，注意：请使用<graph
:on-line-click=functionName />的方式来绑定关系线事件,使用示例
|
(lineObject, $event)
|
|
事件名
|
说明
|
参数
|
|---|---|---|
|
node
|
自定义节点内容的插槽，通过此功能可以完全自定义节点的样式，实现图片节点、闪烁节点等等你想要的效果。使用示例
|
{ node }
|
|
bottomPanel
|
自定义图谱底部区域内容的插槽，通过此功能可以在图谱的底部显示一些内容，比如筛选区域，图例说明等。
|
{ graph }
|
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
id
|
节点id，不能重复，重复会被忽略
|
string
|
是
|
|
|
text
|
节点名称 |
string
|
是
|
|
|
styleClass
|
节点样式class
|
string
|
否
|
|
|
color
|
节点背景颜色
|
string
|
否
|
|
|
fontColor
|
节点文字颜色
|
string
|
否
|
|
|
borderWidth
|
节点边框粗细（像素）
|
int
|
否
|
1
|
|
borderColor
|
节点边框颜色
|
string
|
否
|
|
|
nodeShape
|
节点形状，0:圆形；1:矩形;使用示例
|
int
|
否
|
1
|
|
width
|
节点宽度 |
int
|
否
|
自动
|
|
height
|
节点高度 |
int
|
否
|
自动
|
|
opacity
|
透明度(值范围：0到1,或者0到100)
|
number
|
否
|
1
|
|
isHide
|
是否隐藏这个节点
|
boolean
|
否
|
false
|
|
disableDrag
|
是否禁用节点的拖动功能
|
boolean
|
否
|
false
|
|
disableDefaultClickEffect
|
是否禁用默认的点击选中效果（即使禁用，可以出发自定的节点点击事件）
|
boolean
|
否
|
false
|
|
expandHolderPosition
|
节点展开/关闭按钮位置（left/top/right/bottom）节点的这个设置会覆盖全局的expandHolderPosition设置，即使改节点没有子节点也可以让其显示展开/收缩按钮，可以实现部分节点显示展开/收缩按钮的效果;使用示例
|
string
|
否
|
hide
|
|
expanded
|
手工设置节点的展开收缩状态;使用示例
|
boolean
|
否
|
true
|
|
fixed
|
是否使用固定位置（以当前图谱左上角为0,0的坐标系）;使用示例
|
boolean
|
否
|
false
|
|
x
|
x坐标（以当前图谱左上角为0,0的坐标系）,fixed=true时有效
|
int
|
否
|
|
|
y
|
y坐标（以当前图谱左上角为0,0的坐标系）,fixed=true时有效
|
int
|
否
|
|
|
innerHTML
|
用HTML自定义节点内部的内容，当此属性不为空时，text属性将失效;使用示例
|
string
|
否
|
|
|
html
|
用HTML自定义节点，当此属性不为空时，节点的所有样式属性将失效使用示例
|
string
|
否
|
|
|
data
|
自定义属性需要放在这里，才能在后续使用中从节点获取，如:{myKey1:'value1',myKey2:'value2'}，示例1：使用自定义属性作为节点名称/节点图标，示例1：使用自定义属性进行筛选
|
Object
|
否
|
|
属性名
|
说明
|
|---|---|
|
targetNodes
|
获取与当前节点存在关系的其他所有节点，这些节点中包含的当前节点的父节点和子节点，如果只想获取父节点请使用lot.parent,获取子节点请使用lot.childs
|
|
lot |
获取与当前节点的布局信息，其中包含了当前布局器为其设置的坐标、层级、权重、上下级节点等信息
|
|
lot.parent |
单独说明lot中的这个属性，他可以获取节点的父节点，这个子节点是由布局器分析出来的父节点，在有循环闭合回路的关系网中是不准确的，他会强行从多个中取一个
|
|
lot.childs |
单独说明lot中的这个属性：他可以获取节点的子节点，这个子节点是由布局器分析出来的子节点，在有循环闭合回路的关系网中是不完整的，他会强行剔除一些冲突的子节点
|
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
from
|
关系from节点的id
|
string
|
是
|
|
|
to
|
关系to节点的id
|
string
|
是
|
|
|
text
|
关系文字 |
string
|
是
|
|
|
styleClass
|
节点样式class
|
string
|
否
|
|
|
lineWidth
|
线条粗细（像素）
|
int
|
否
|
1
|
|
lineColor
|
线条颜色 |
string
|
否
|
|
|
isHide
|
是否显示 |
boolean
|
否
|
false
|
|
lineShape
|
线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
|
int
|
否
|
|
|
fontColor
|
线条文字颜色
|
string
|
否
|
|
|
showLineLabel
|
是否显示连线文字
|
boolean
|
否
|
true
|
|
isHideArrow
|
是否显示箭头
|
boolean
|
否
|
true
|
|
data
|
自定义属性需要放在这里，才能在后续使用中从节点获取，如:{myKey1:'value1',myKey2:'value2'},示例1：使用自定义属性进行筛选
|
Object
|
否
|
|
属性名
|
说明
|
|---|---|
|
relations |
【只读属性】Array<Link>这是一个数组，可以获取这个线条上所有的关系数据。
|
|
fromNode |
【只读属性】获取这个线条的起始节点对象
|
|
toNode |
【只读属性】获取这个线条的终止节点对象
|
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
layoutLabel
|
布局描述（如果有多个布局可以切换，此属性将作为布局名称显示）
|
string
|
是
|
|
|
layoutName |
布局方式（tree树状布局/center中心布局/force自动布局）
|
string
|
是
|
center
|
|
layoutClassName
|
当使用这个布局时，会将此样式添加到图谱上
|
string
|
否
|
1
|
|
useLayoutStyleOptions
|
是否使用该布局的样式设置覆盖全局样式设置（当有多个布局可供切换时，此功能可以实现不同布局下整体样式的切换）
|
boolean
|
否
|
false
|
|
defaultNodeShape
|
当useLayoutStyleOptions=true时有效，默认的节点形状，0:圆形；1:矩形
|
int
|
否
|
1
|
|
defaultNodeColor
|
当useLayoutStyleOptions=true时有效，默认的节点背景颜色
|
string
|
否
|
|
|
defaultNodeFontColor
|
当useLayoutStyleOptions=true时有效，默认的节点文字颜色
|
string
|
否
|
|
|
defaultNodeBorderColor
|
当useLayoutStyleOptions=true时有效，默认的节点边框颜色
|
string
|
否
|
|
|
defaultNodeBorderWidth
|
当useLayoutStyleOptions=true时有效，默认的节点边框粗细（像素）
|
int
|
否
|
1
|
|
defaultNodeWidth
|
当useLayoutStyleOptions=true时有效，默认的节点宽度
|
int
|
否
|
自动
|
|
defaultNodeHeight
|
当useLayoutStyleOptions=true时有效，默认的节点高度
|
int
|
否
|
自动
|
|
defaultExpandHolderPosition
|
当useLayoutStyleOptions=true时有效，默认的节点展开/关闭按钮位置（left/top/right/bottom）
|
string
|
否
|
hide
|
|
defaultLineColor
|
当useLayoutStyleOptions=true时有效，默认的线条颜色
|
string
|
否
|
|
|
defaultLineWidth
|
当useLayoutStyleOptions=true时有效，默认的线条粗细（像素）
|
int
|
否
|
1
|
|
defaultLineShape
|
当useLayoutStyleOptions=true时有效，默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
|
int
|
否
|
|
|
defaultLineMarker
|
当useLayoutStyleOptions=true时有效，默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
|
Object
|
否
|
|
|
centerOffset_x
|
根节点x坐标偏移量
|
int
|
否
|
0
|
|
centerOffset_y
|
根节点y坐标偏移量
|
int
|
否
|
0
|
|
defaultShowLineLabel
|
当useLayoutStyleOptions=true时有效，默认是否显示连线文字
|
boolean
|
否
|
true
|
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
from |
left:从左到右/top:从上到下/right:从右到左/bottom:从下到上
|
string
|
否
|
left
|
|
min_per_width
|
节点距离限制:节点之间横向距离最小值
|
int
|
否
|
|
|
max_per_width
|
节点距离限制:节点之间横向距离最大值
|
int
|
否
|
|
|
min_per_height
|
节点距离限制:节点之间纵向距离最小值
|
int
|
否
|
|
|
max_per_height
|
节点距离限制:节点之间纵向距离最大值
|
int
|
否
|
|
|
levelDistance
|
分别设置每一层的高度，例如：100,200,300,200，此设置优先级高于"节点距离限制"选项
|
string
|
否
|
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|---|---|---|---|
|
distance_coefficient
|
层级距离系数，默认为1，可以为小数，用于调节中心布局不同层级之间的距离，实现连线比较长的视觉效果使用示例
|
number
|
否
|
left
|
|
参数
|
说明
|
类型
|
必选/非必选
|
默认值
|
|---|