多节点拓扑图

用于展现一个与多个节点之间的关系数据。

属性

基础

• 组件标题： 用于在图层中显示组件的名称。1.1+

• 组件尺寸： 组件的宽度和高度，单位为px。

• 组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为px。

• 背景颜色： 组件的背景颜色。

• 系列颜色： 图形的颜色。可添加选择颜色显示，默认情况下图形节点的颜色为主题的颜色。

系列

• 鼠标缩放平移： 是否开启鼠标缩放平移。

• 左边距： 离容器左侧的距离。

• 右边距： 离容器右侧的距离。

• 上边距： 离容器上侧的距离。

• 下边距： 离容器下侧的距离。

• 布局：

  • 力引导布局： 采用力引导布局。

    • 节点拖拽： 是否开启节点拖拽。

    • 最小边长: 边的两个节点之间的最小距离，这个距离也会受斥力范围影响 。

    • 最大边长： 边的两个节点之间的最大距离，这个距离也会受斥力范围影响 。

    • 斥力范围： 节点之间的斥力因子，值越大则斥力越大。

  • 环形布局： 采用环形布局。

    • 旋转标签: 是否旋转标签，默认不旋转。

• 节点样式：

  • 节点标记： 节点标记图形。

  • 标记图片： 节点标记图片。

  • 节点宽： 节点的宽度。

  • 节点高： 节点的高度。

  • 描边颜色： 节点描边颜色。

  • 阴影大小： 阴影范围。

  • 阴影颜色： 图形的阴影颜色。

    提示：

    当数据-节点标记为空时，此时节点图形的设置由节点标记，标记图片控制，节点宽高由节点宽，节点高控制，数据-节点标记不为空时，节点大小是由数据-节点标记里的第一个字段所控制，节点标记是由数据-节点标记里第二个字段控制。

• 文本标签： 指关系图的文本标签，可用于说明图形的一些数据信息，例如值、名称等。

  • 显示文本： 是否显示文本。

  • 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

    字符串模板变量

    • {a} : 系列名。

    • {b} : 数据名。

    • {c} : 数据值。

    • {d}: 百分比。

    示例：

    {b}: {d}
    

    回调函数

    可用参数为data。

    示例：

    return data.name;
    

    参数 data是 内容格式器需要的单个数据资源。格式如下：

    {
        // 数据名，类目名
        name: string,
        // 传入的原始数据项
        data: Object,
        // 传入的数据值
        value: number|Array,
        // 百分比
        percent: number
    }
    

  • 位置： 标签的位置。

  • 字体颜色： 文本标签字体颜色。

  • 字体大小： 文本标签字体大小。

  • 字体粗细： 文本标签字体粗细。

  • 字体： 文本标签字体样式。

• 关系边样式：

  • 标签： 指关系图关系边的文本标签，可用于说明图形的一些数据信息，例如值、名称等。

    • 显示： 是否显示文本。

    • 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

      字符串模板变量

      • {a} : 系列名。

      • {b} : 数据名。

      • {c} : 数据值。

      示例：

      {b}: {c}
      

      回调函数

      可用参数为data。

      示例：

         return data.name;
      

      参数 data是 内容格式器需要的单个数据资源。格式如下：

      {
         // 数据名，类目名
         name: string,
         // 传入的原始数据项
         data: Object,
         // 传入的数据值
         value: number|Array
      }
      

  • 字体颜色： 文本标签字体颜色。

  • 字体大小： 文本标签字体大小。

  • 字体粗细： 文本标签字体粗细。

  • 字体： 文本标签字体样式。

  • 线样式:

    • 自定义颜色： 是否开启自定义颜色。

    • 源节点标记： 指向源节点的箭头标记。

    • 目标节点标记： 指向目标节点的箭头标记。

    • 样式：

      • 虚线

      • 实线

      • 点线

    • 宽度： 线的宽度。

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

标题

• 显示标题： 是否显示标题

• 内容：

  • 标题

    • 主： 主标题内容。

    • 副： 副标题内容。

  • 超链接

    • 主： 主标题超链接。

    • 副： 副标题超链接。

• 位置

  • 水平对齐

  • 垂直对齐

• 外观

  • 内边距

  • 主副间隔

• 主标题文本样式

  • 字体颜色： 主标题字体颜色。

  • 字体大小： 主标题字体大小。

  • 字体粗细： 主标题字体粗细。

  • 字体： 主标题字体样式。

• 副标题文本样式

  • 字体颜色： 副标题字体颜色。

  • 字体大小： 副标题字体大小。

  • 字体粗细： 副标题字体粗细。

  • 字体： 副标题字体样式。

图例

• 显示图例： 是否显示图例。

• 选中模式： 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。

• 内容格式器： 用来格式化图例文本，支持字符串模板和回调函数两种形式。

  • 字符串模板： {name}

  • 回调函数：

    return data;
    

• 位置

  • 排列方式： 图例列表的布局朝向。

  • 水平位置： 水平排列。

  • 垂直位置： 垂直排列。

• 文字样式

  • 字体颜色： 图例字体颜色。

  • 字体大小： 图例字体大小。

  • 字体粗细： 图例字体粗细。

  • 字体： 图例字体样式。

提示框

• 显示提示框： 是否显示提示框。

• 提示模板 ：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

  • 字符串模板

    模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在触发点为坐标轴的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

    • 折线（区域）图、柱状（条形）图、K 线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
    • 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
    • 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
    • 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

  • 回调函数

    return data;
    

• 触发点：

  • 坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

  • 数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

• 提示外观

  • 背景颜色： 提示框浮层的背景颜色。

  • 边框颜色： 提示框浮层的边框颜色。

  • 边框宽度： 提示框浮层的边框宽。

  • 内边距： 提示框浮层内边距

• 文本样式

  • 字体颜色： 提示框字体颜色。

  • 字体大小： 提示框字体大小。

  • 字体粗细： 提示框字体粗细。

  • 字体： 提示框字体样式。

工具栏

• 显示工具栏： 是否显示工具栏。

• 功能按钮

  • 保存为图片按钮

  • 还原按钮

  • 数据视图按钮

• 位置朝向

  • 排列方式： 功能按钮的布局朝向。

  • 水平位置： 水平排列。

  • 垂直位置： 垂直排列。

• 图标尺寸

  • 图标大小

  • 间隔

数据

静态数据

上图中的示例JSON代码如下：

 [
     {
         "id": 1,
         "name": " ",
         "category": "人脸ID",
         "linksValue": "A",
         "parentId": 0,
         "value": 50,
         "symbol": "image://./static/widgets/bind-graph/image/3.png"
     },
     {
         "id": 2,
         "name": "手机1",
         "category": "手机IMSI",
         "linksValue": "匹配手机号码",
         "parentId": 1,
         "value": 40,
         "symbol": "image://./static/widgets/bind-graph/image/1.png"
     },
     {
         "id": 3,
         "name": "车牌1",
         "category": "车牌号码",
         "linksValue": "匹配车牌号码",
         "parentId": 1,
         "value": 40,
         "symbol": "image://./static/widgets/bind-graph/image/2.png"
     },
     {
         "id": 4,
         "name": "手机2",
         "category": "手机IMSI",
         "linksValue": "匹配手机号码",
         "parentId": 1,
         "value": 40,
         "symbol": "image://./static/widgets/bind-graph/image/1.png"
     },
     {
         "id": 5,
         "name": "手机3",
         "category": "手机IMSI",
         "linksValue": "匹配手机号码",
         "parentId": 1,
         "value": 40,
         "symbol": "image://./static/widgets/bind-graph/image/1.png"
     },
     {
         "id": 6,
         "name": "手机4",
         "category": "手机IMSI",
         "linksValue": "匹配手机号码",
         "parentId": 1,
         "value": 40,
         "symbol": "image://./static/widgets/bind-graph/image/1.png"
     },
     {
         "id": 7,
         "name": "手机5",
         "category": "手机IMSI",
         "linksValue": "匹配手机号码",
         "parentId": 1,
         "value": 40,
         "symbol": "image://./static/widgets/bind-graph/image/1.png"
     },
     {
         "id": 8,
         "name": "手机6",
         "category": "手机IMSI",
         "linksValue": "匹配手机号码",
         "parentId": 1,
         "value": 40,
         "symbol": "image://./static/widgets/bind-graph/image/1.png"
     },
     {
         "id": 9,
         "name": "车牌4",
         "value": 40,
         "category": "车牌号码",
         "linksValue": "匹配车牌号码",
         "parentId": 1,
         "symbol": "image://./static/widgets/bind-graph/image/2.png"
     },
     {
         "id": 10,
         "name": "车牌5",
         "value": 40,
         "category": "车牌号码",
         "linksValue": "匹配车牌号码",
         "parentId": 1,
         "symbol": "image://./static/widgets/bind-graph/image/2.png"
     },
     {
         "id": 11,
         "name": "车牌2",
         "value": 40,
         "category": "车牌号码",
         "linksValue": "匹配车牌号码",
         "parentId": 1,
         "symbol": "image://./static/widgets/bind-graph/image/2.png"
     },
     {
         "id": 12,
         "name": "车牌3",
         "value": 40,
         "category": "车牌号码",
         "linksValue": "匹配车牌号码",
         "parentId": 1,
         "symbol": "image://./static/widgets/bind-graph/image/2.png"
     }
 ]

• 节点标识：

  • [0] - id: 节点标识，必须有，不能重复。放在节点关系中表示边的源节点名称的字符串。

• 节点关系：

  • [0] - id: 关系边的节点标识。放在节点关系中表示边的源节点名称的字符串。
  • [1] - parentId: 关系边的上级节点标识。，边的目标节点名称的字符串。
  • [2] - linksValue: 所在边的标签，可无。

• 节点分类：

  • [0] - category: 数据项所在类目的 index，可无。

• 节点数据：

  • [0] - name： 数据项名称。可无。
  • [1] - value： 数据项值。可无。

• 节点标记：

  • [0] - symbolSize： 节点的大小。可无。
  • [1] - symbol： 节点的标记图形。可无，默认为圆形。

数据资源

交互

点击散点交互事件

勾选启用，开启组件交互功能。当单击关系图的节点时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

点击线段交互事件

勾选启用，开启组件交互功能。当单击关系图的连接线时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

数据响应

关系图支持数据响应配置。

节点编程

详见关系图节点编程