vue中图谱关系插件relation-graph

一、效果图

二、安装下载（vue2.0版本的）

npm install --save relation-graph
var foo = 'bar';

三、直接上代码

<template>
  <div class="graphClass" ref="myPage">
    <RelationGraph
      ref="seeksRelationGraph"
      :options="graphOptions"
      :on-node-click="onNodeClick"
      :on-line-click="onLineClick"
    >
      <div
        class="node"
        style="height: 100%"
        slot="node"
        slot-scope="{ node }"
        @mouseover="showNodeTips(node, $event)"
        @mouseout="hideNodeTips(node, $event)"
      >
        <p
          style="
            position: absolute;
            top: 8px;
            left: 38px;
            min-width: 350px;
            font-size: 10px;
            color: #8c9094;
            text-align: left;
          "
        >
          {{ node.text }}
        </p>
      </div>
    </RelationGraph>
    <!-- 点击提示 -->
    <div
      v-show="isShowNodeTipsPanel"
      :style="{
        left: nodeMenuPanelPosition.x + 'px',
        top: nodeMenuPanelPosition.y + 'px',
      }"
      style="
        position: absolute;
        padding: 5px 10px;
        width: 250px;
        background: rgba(230, 217, 202, 0.8);
        z-index: 999;
      "
    >
      <div style="line-height: 15px; color: #888888; font-size: 10px">
        {{ currentNode.text }};[{{ currentNode.id }}]
      </div>
    </div>
  </div>
</template>
<script>
import RelationGraph from 'relation-graph';
import { knowledgeGraphList } from '../../api';
export default {
  components: { RelationGraph },
  props: {
    id: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      activeKey: '',
      isShowNodeTipsPanel: false,
      nodeMenuPanelPosition: { x: 0, y: 0 },
      currentNode: {},
      graphOptions: {
        allowShowMiniToolBar: false, //是否显示工具栏
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultNodeShape: 0, //默认的节点形状，0:圆形；1:矩形
        // defaultExpandHolderPosition: 'bottom', //节点展开关闭的按钮位置
        defaultLineShape: 1, //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
        defaultJunctionPoint: 'border', //默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
        //   defaultNodeBorderWidth: 0, //节点边框粗细
        defaultcolor: '#8c9094', //默认的线条颜色
        defaultNodeColor: '#FACD91', //默认的节点背景颜色
        defaultNodeWidth: '30', //节点宽度
        defaultNodeHeight: '30', //节点高度
        defaultFocusRootNode: true, //默认为根节点添加一个被选中的样式
        moveToCenterWhenResize: true, //当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
        debug: true,
        layouts: [
          {
            label: '中心',
            layoutName: 'center', //布局方式（tree树状布局/center中心布局/force自动布局）
            //   layoutClassName: 'seeks-layout-center', //当使用这个布局时，会将此样式添加到图谱上
            defaultJunctionPoint: 'border', //默认的连线与节点接触的方式
            defaultNodeShape: 0, //默认的节点形状，0:圆形；1:矩形
            defaultLineShape: 1, //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
          },
        ],
      },
    };
  },
  mounted() {
    this.showSeeksGraph();
  },
  methods: {
    showNodeTips(nodeObject, $event) {
      this.currentNode = nodeObject;
      const _base_position = this.$refs.myPage.getBoundingClientRect();
      this.isShowNodeTipsPanel = true;
      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10;
      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10;
    },
    hideNodeTips(nodeObject, $event) {
      this.isShowNodeTipsPanel = false;
    },
    callback(val) {
      this.activeKey = val;
      this.showSeeksGraph();
    },
    //渲染节点和连接线
    showSeeksGraph() {
      knowledgeGraphList({ id: this.id }).then(({ data }) => {
        // 线
        let lines = data.edges.map(item => ({
          from: item.from.toString(),
          to: item.to.toString(),
          text: item.label,
          color: item.label == '依据' ? '#FACD91' : item.label == '历史' ? '#67C23A' : '#82D2F8',
          styleClass: 'my-line-highlightxxxxxxxxxxxxxxx',

          lineShape: 6,
          fromJunctionPoint: 'border',
          toJunctionPoint: 'bottom',
        }));
        // 节点
        let nodes = [];
        data.nodes.forEach((item, index) => {
          let color =
            lines.filter(c => c.to == item.id).length > 0
              ? lines.filter(c => c.to == item.id)[0].color
              : '#FACD91';

          if (index == 0) {
            nodes.push({
              id: item.id.toString(),
              text: item.label,
              color: '#3e7afa',
            });
          } else {
            nodes.push({
              id: item.id.toString(),
              text: item.label,
              color: color,
            });
          }
        });
        var __graph_json_data = {
          rootId: 'a',
          nodes: nodes,
          lines: lines,
        };
        // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
        this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, graphInstance => {
          setTimeout(() => {
            graphInstance.stopAutoLayout();
          }, 1000);
        });
      });
    },
    //点击节点触发的函数
    onNodeClick(nodeObject, $event) {
      const allLinks = this.$refs.seeksRelationGraph.getLinks();
      allLinks.forEach(link => {
        // 还原所有样式
        link.relations.forEach(line => {
          if (line.data.orignColor) {
            line.color = line.data.orignColor;
          }
          if (line.data.orignFontColor) {
            line.fontColor = line.data.orignColor;
          }
          if (line.data.orignLineWidth) {
            line.lineWidth = line.data.orignLineWidth;
          }
        });
      });
      // 让与{nodeObject}相关的所有连线高亮
      allLinks
        .filter(link => link.fromNode === nodeObject || link.toNode === nodeObject)
        .forEach(link => {
          link.relations.forEach(line => {
            line.data.orignColor = line.color;
            line.data.orignFontColor = line.fontColor || line.color;
            line.data.orignLineWidth = line.lineWidth || 1;
            line.color = '#3e7afa';
            line.fontColor = '#3e7afa';
            line.lineWidth = 1;
          });
        });
      // 有时候更改一些属性后，并不能马上同步到视图，这需要以下方法让视图强制根据数据同步到最新
      this.$refs.seeksRelationGraph.getInstance().dataUpdated();
    },
    //店家连接线触发的函数
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject);
    },
  },
};
</script>
<style lang="scss">
.graphClass {
  height: 700px;
  position: relative;
  border: 1px solid #f2f3f3;
  .rel-map-canvas {
    margin-left: calc(50% - 10px) !important;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .relation-graph {
  .my-line-highlightxxxxxxxxxxxxxxx {
    animation: my-line-easy-anm1 2s linear infinite;
  }
  .rg-line-anm-1 {
    animation: my-line-easy-anm1 2s linear infinite;
  }
  //取消点击线条后节点的闪烁效果
  rel-node-flashing {
    animation: none;
  }
}

@keyframes my-line-easy-anm1 {
  0% {
    stroke-dashoffset: 100px;
    stroke-dasharray: 5, 5, 5;
  }
  100% {
    stroke-dasharray: 5, 5, 5;
    stroke-dashoffset: 3px;
  }
}
</style>

链接: https://relation-graph.com/#/docs/start
链接: https://cloud.tencent.com/developer/article/2325304