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

图谱，可拖拽、点击、在线配置、放大缩小、下载，个人认为这个组件很帅啦哈哈哈

贴个代码吧，需求是：具有树结构，默认一二三节点展开，其他节点收起，禁用拖拽，直线相连，节点可点击，点击alert当前节点

1、 引入relation-graph

npm install --save relation-graph

2、示例代码：

<template>
    <div class="fd-page-a">
        <div class="fd-graph">
            <SeeksRelationGraph ref="seeksRelationGraph"
                                :options="graphOptions"
                                :on-node-click="onNodeClick"
                                :on-node-expand="onNodeExpand"
                                :on-node-collapse="onNodeCollapse">
            </SeeksRelationGraph>
        </div>
    </div>
</template>
<script src="./index.js"></script>
<style lang="less">
    @import "./index.less";
</style>

import SeeksRelationGraph from 'relation-graph';
export default {
    name: 'page-graph',
    components: {SeeksRelationGraph},
    mixins: [request],
    data() {
        return {
            demoname: '---',
            graphOptions: {
                debug: true,
                // 禁用拖拽
                disableDragNode:true,
                'backgrounImage': 'http://ai-mark.cn/images/ai-mark-desc.png',
                'backgrounImageNoRepeat': true,
                'layouts': [
                    {
                        'label': '中心',
                        'layoutName': 'tree',
                        'layoutClassName': 'seeks-layout-center',
                        'defaultJunctionPoint': 'border',
                        'defaultNodeShape': 0,
                        'defaultLineShape': 1,
                        'from': 'left',
                        // 通过这4个属性来调整 tree-层级距离&节点距离
                        'min_per_width': '200',
                        'max_per_width': '500',
                        'min_per_height': '40',
                        'max_per_height': '60',
                        // 如果此选项有值，则优先级高于上面那4个选项
                        'levelDistance': ''
                    }
                ],
                // 箭头样式
                'defaultLineMarker': {
                    'markerWidth': '0',
                    'markerHeight': '0',
                    'refX': '0',
                    'refY': '0'
                },
                'defaultExpandHolderPosition': 'right',
                'defaultNodeShape': 1,
                'defaultNodeWidth': '100',
                'defaultLineShape': 4,
                'defaultJunctionPoint': 'lr',
                'defaultNodeBorderWidth': 0,
                'defaultLineColor': 'rgba(0, 186, 189, 1)',
                'defaultNodeColor': 'rgba(0, 206, 209, 1)'
            }
        };
    },
    mounted() {
        this.demoname = this.$route.params.demoname;
        this.setGraphData();
    },
    created() {
        this.detailData = [];
    },
    methods: {
        // 获取树数据
        setGraphData() {
            this.requestJson().then(res => {
                this.detailData = res;
                // 使用要点：通过节点属性expandHolderPosition: 'right' 和 expanded: false 可以让节点在没有子节点的情况下展示一个"展开"按钮
                //         通过onNodeExpand事件监听节点，在被展开的时候有选择的去从后台获取数据，如果已经从后台加载过数据，则让当前图谱根据当前的节点重新布局
                const __graph_json_data = {
                    'rootId': 'a',
                    'nodes': [
                        {
                            'id': 'a',
                            'text': 'a',
                            'children': [
                                {
                                    'id': 'b',
                                    'text': 'b',
                                    'children': [
                                        {
                                            'id': 'b1',
                                            'text': 'b1',
                                            'children': [
                                                {'id': 'b1-1', 'text': 'b1-1'},
                                                {'id': 'b1-2', 'text': 'b1-2'},
                                                {'id': 'b1-3', 'text': 'b1-3'},
                                                {'id': 'b1-4', 'text': 'b1-4'},
                                                {'id': 'b1-5', 'text': 'b1-5'},
                                                {'id': 'b1-6', 'text': 'b1-6'}
                                            ]
                                        },
                                        {
                                            'id': 'b2',
                                            'text': 'b2',
                                            'children': [
                                                {'id': 'b2-1', 'text': 'b2-1'},
                                                {'id': 'b2-2', 'text': 'b2-2'}
                                            ]
                                        }
                                    ]
                                },
                                {
                                    'id': 'c',
                                    'text': 'c',
                                    'children': [
                                        {'id': 'c1', 'text': 'c1'},
                                        {'id': 'c2', 'text': 'c2'},
                                        {'id': 'c3', 'text': 'c3'}
                                    ]
                                }
                            ]
                        }
                    ],
                    'links': [
                        // 你仍然可以通过常规方式添加关系
                    ]
                };
                this.g_loading = false;
                this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
                    // 这些写上当图谱初始化完成后需要执行的代码
                    // 获取根节点的子节点，即可获得图谱第一层中的节点

                    const level_1_nodes = seeksRGGraph.getNodeById(__graph_json_data.rootId).lot.childs;
                    level_1_nodes.forEach(thisLevel1Node => {
                        const level_2_nodes = seeksRGGraph.getNodeById(thisLevel1Node.id).lot.childs;

                        level_2_nodes.forEach(thisLevel2Node => {
                            this.applyCollapseStyle2Node(thisLevel2Node);
                        });

                        // this.applyCollapseStyle2Node(thisLevel1Node);
                    });
                    this.$refs.seeksRelationGraph.refresh();
                });
            })
                .catch(error => {
                    window.console.error(error);
                });
        },
        // _node的子节点将被隐藏，同时让_node右侧显示一个加号，点击后可以展开子节点
        applyCollapseStyle2Node(_node) {
            if (_node.lot.childs.length > 0) {
                _node.lot.childs.forEach(thisChildNode => {
                    thisChildNode.isShow = false;
                    this.applyCollapseStyle2Node(thisChildNode);
                });
                _node.expanded = false;
                _node.expandHolderPosition = 'right';
            }
        },
        onNodeCollapse(node, e) {
            // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
            this.$refs.seeksRelationGraph.refresh();
        },
        onNodeExpand(node, e) {
            // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
            this.$refs.seeksRelationGraph.refresh();
        },
        // 点击节点
        onNodeClick(nodeObject, $event) {
            alert(nodeObject.text);
        }
    }
};

默认

点击展开