因项目需要做一个关系图,我采用relation-graph来完成项目需求,附上地址
relation-graph组件地址
因为多个页面都需要用到这个关系图,所以我将它封装成一个组件,在其他页面引用即可。
1.新建chart.vue页面,引入relation-graph
npm install --save relation-graph
<!--
/**
* @Author super_jhx
* @Description 关系图组件
* @Date 2021-06-11 09:54:54 星期五
*/
-->
<template>
<div>
<div style="height:calc(100vh - 50px);">
<seeksRelationGraph
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
/>
</div>
</div>
</template>
<script>
import seeksRelationGraph from 'relation-graph'
export default {
name: 'Chart',
components: {
seeksRelationGraph },
computed: {
},
data() {
return {
graphOptions: {
debug: true,
'backgrounImage': 'http://ai-mark.cn/images/ai-mark-desc.png',
'backgrounImageNoRepeat': true,
'layouts': [
{
'label': '树',
'layoutName': 'tree',
'layoutClassName': 'seeks-layout-center',
'defaultNodeShape': 0,
'defaultLineShape': 1,
'from'