vue2.x使用Relation Graph 人物关系图谱

贴个官网：relation-graph:一个vue关系图谱组件

 引入relation-graph

npm install --save relation-graph

1.人物关系图谱的基础使用

注：上述graphOptions中配置中，当相互关系人少于5条时，会造成相互关系的连线造成遮掩等问题，如下图所示

 这时graphOptions配置修改如下即可不存在遮掩

   graphOptions: {
        useLayoutStyleOptions: true,
        defaultNodeBorderWidth: 0,
        defaultLineShape: 1,
        defaultNodeColor: "gary",
        defaultNodeFontColor: "rgba(51,51,51,1)",
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        layouts: [
          {
            label: "中心",
            layoutName: "center",
            layoutClassName: "seeks-layout-center",
            distance_coefficient: 0.6,
          },
        ],
        defaultJunctionPoint: "border",
      },

2.人物关系图包括筛选条件，点击弹出详情的使用，使用element-ui

效果如下