快捷導(dǎo)航

vue+relation-graph繪制關(guān)系圖實用組件操作方法

更新時間：2023年07月19日 08:17:38 作者：-耿瑞-

這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實用組件操作方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

先在終端執(zhí)行命令

vue create relationgraph

創(chuàng)建一個vue2的項目

在這里插入圖片描述

然后在編輯器中打開新創(chuàng)建的項目在終端中執(zhí)行命令

npm install relation-graph --save

引入依賴

在這里插入圖片描述

這樣我們relation-graph就進來了

然后我們在需要使用的組件中編寫代碼如下

<template>
  <div>
    <div style="width: calc(100% - 10px);height:100vh;">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </div>
  </div>
</template>
<script>
import SeeksRelationGraph from 'relation-graph';
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      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個屬性來調(diào)整 tree-層級距離&節(jié)點距離
            min_per_width: '200',
            max_per_width: '500',
            // min_per_height: '40',
            // max_per_height: '60',
            // 如果此選項有值，則優(yōu)先級高于上面那4個選項
            levelDistance: '',
          },
        ],
        // 箭頭樣式
        defaultLineMarker: {
          markerWidth: '0',
          markerHeight: '0',
          refX: '0',
          refY: '0',
        },
        defaultExpandHolderPosition: 'right',
        defaultNodeShape: 1,
        defaultNodeWidth: '100', // 節(jié)點寬度
        defaultLineShape: 4, //線條樣式
        defaultJunctionPoint: 'lr',
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgba(0, 186, 189, 1)',
        defaultNodeColor: 'rgba(0, 206, 209, 1)',
      }
    };
  },
  mounted() {
    this.setGraphData();
  },
  methods: {
    setGraphData() {
      var __graph_json_data = {
        rootId: 'N1',
        nodes: [
          { id: 'N1', text: '測試方案', color: '#2E4E8F' },
          { id: 'N15', text: '高級規(guī)劃', color: '#4ea2f0' },
          {
            id: 'N16',
            color: '#4ea2f0',
            html: `<div class="A">
                    <div class="A-1">高級測試管理方案</div>
                    <div class="A-2">映射工具</div>
                  </div>`,
          },
          {
            id: 'N17',
            text: '微化文案管理',
            color: '#4ea2f0',
          },
          { id: 'N18', text: '初級測試文案', color: '#4ea2f0' }
        ],
        links: [
          { from: 'N1', to: 'N15' },
          { from: 'N15', to: 'N16' },
          { from: 'N15', to: 'N17' },
          { from: 'N15', to: 'N18' },
          { from: 'N15', to: 'N19' },
        ],
      };
      this.$refs.seeksRelationGraph.setJsonData(
        __graph_json_data,
        (seeksRGGraph) => {
          console.log(seeksRGGraph);
        }
      );
    },
  },
};
</script>
<style>
</style>

這里首先大家要縷清關(guān)系我們每個節(jié)點都帶有id 例如N1 N15然后我們設(shè)置根節(jié)點的id是N1links梳理了元素之前的關(guān)系N15 插入在N1 下剩下的 N16 N17 N18 N19則插入在N15下然后我們可以通過{ id: ‘唯一標(biāo)識’, text: ‘內(nèi)容文本’, color: ‘顏色代碼’ }也可以通過{ id: ‘唯一標(biāo)識’, html: ‘頁面結(jié)構(gòu)字符串’, color: ‘顏色代碼’ }來完成最后我們運行出來的效果是這樣的

在這里插入圖片描述

右邊的操作了也都是可以用的我們可以進行放大縮小甚至下載到本地

在這里插入圖片描述

到此這篇關(guān)于vue+relation-graph繪制關(guān)系圖實用組件的文章就介紹到這了,更多相關(guān)vue relation graph關(guān)系圖組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: