加载中...

vue画关系图

relation-graph 使用 & 配置:  http://relation-graph.com/#/docs/start

源码:https://github.com/seeksdream/relation-graph

1, 引入relation-graph

npm install --save relation-graph

2, 示例代码:

通过调整以下示例代码中的options、nodes、links的配置实现不同的展示效果,还可以通过事件在图谱中实现交互式功能

<template>

  <div >

    <div >

      这个示例中,调用setJsonData时传递的是一个典型的有层级结构的数据,图谱会自动识别(通过children属性识别子节点),再将其做扁平化处理。这样做仅仅是为了方便展示一些树状图谱。

      <br />

      直接使用tree数据结构有明显的确缺陷:只能设置全局的线条默认样式,无法对具体的link设置属性,不能精细化的定义线条的样式。

    </div>

    <div

      v-loading="g_loading"

     

    >

      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions">

      &