人物关系图谱插件

大家好，又见面了，我是你们的朋友全栈君。

<template>
    <div>
        <div style="height:calc(100vh - 50px);">
            <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
        </div>
    </div>
</template>

<script>
    import RelationGraph from 'relation-graph'
    export default {
        name: 'Demo',
        components: { RelationGraph },
        data() {
            return {
            graphOptions: {
                allowSwitchLineShape: true,
                allowSwitchJunctionPoint: true,
                defaultJunctionPoint: 'border'
                // 这里可以参考"Graph 图谱"中的参数进行设置
            }
            }
        },
        mounted() {
            this.showSeeksGraph()
        },
        methods: {
            showSeeksGraph() {
            var __graph_json_data = {
                rootId: 'a',
                nodes: [
                { id: 'a', text: 'A', borderColor: 'yellow' },
                { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
                { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
                ],
                links: [
                { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
                { from: 'a', to: 'c', text: '关系2' },
                { from: 'b', to: 'c', text: '关系3' },
                ]
            }
            // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置 
            this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, () => {
                // Called when the relation-graph is completed 
            })
            },
            onNodeClick(nodeObject) {
            console.log('onNodeClick:', nodeObject)
            },
            onLineClick(lineObject) {
            console.log('onLineClick:', lineObject)
            }
        }
    }
</script>

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

原网站【使用vue实现的人物关系图谱 – 简书