vue---vis實現複雜網狀關係圖顯示

vis.js是基於瀏覽器的動態可視化庫。能夠處理大量的動態數據，實現對數據的操作和交互。

首先，貼上一個很好的vis.js參考文檔：https://yajunfan.github.io/vis/#/module

案例效果如圖

（1）安裝【npm inatall vis --save】

（2）引入：在【main.js】中引入【import "vis/dist/vis.css";】，在展示網狀圖的頁面引入【import Vis from "vis";】

（3）實現

網狀圖實現：

• 首先在html中創建一個容器用來放置關係圖，注意一定要設置寬度，高度。【 <div id="network_id" class="network" style="height:80vh"></div>】
• 在JS中創建一個nodes數組（代表節點）【new Vis.DataSet(_this.nodesArray)】；
• 在JS中創建一個edges數組（代表關係線）【new Vis.DataSet(_this.edgesArray)】
• 在JS中創建一個網狀圖【 _this.container = document.getElementById("network_id");】
• 在JS中創建data對象【_this.data = {nodes: _this.nodes,  edges: _this.edges };】
• 在JS中創建option【_this.options ={......}】
• 最後初始化網狀圖（把網狀圖實例化）【_this.network = new Vis.Network(_this.container,_this.data,_this.options );】

事件：

  mounted() {
    this.init();
    // 點擊事件
    this.network.on("click", params => {
      console.log("點擊", params.nodes);
      // this.network.addEdgeMode();
    });
    // 點擊鼠標右鍵事件
    this.network.on("oncontext", params => {
      console.log("右擊", params);
      this.dialogVisible = true;
    });
  }

具體見代碼

<template>
  <div>
    <!--width,height 畫布的寬度，高度。 可以是百分比或像素，一般在dom元素上設置 -->
    <div id="network_id" class="network" style="height:80vh"></div>
    <el-dialog title="測試框" :visible.sync="dialogVisible" width="width">
      <div>xxxxxx</div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Vis from "vis";
export default {
  data() {
    return {
      dialogVisible: false,
      nodes: [],
      edges: [],
      // network:null,
      container: null,
      //   節點數組
      nodesArray: [
        {
          id: 0,
          label: "大前端",
          content: "group0",
          color: { background: "yellow" }
        },
        {
          id: 1,
          label: "HTML",
          content: "group1",
          color: { background: "pink" }
        },
        {
          id: 2,
          label: "JavaScript",
          content: "group1",
          color: { background: "pink" }
        },
        {
          id: 3,
          label: "CSS",
          content: "group1",
          color: { background: "pink" }
        },
        {
          id: 4,
          label: "三大主流框架",
          content: "group0",
          color: { background: "pink" }
        },
        {
          id: 5,
          label: "vue.js",
          content: "group0",
          color: { background: "pink" }
        },
        {
          id: 6,
          label: "react.js",
          content: "group0",
          color: { background: "pink" }
        },
        {
          id: 7,
          label: "angular.js",
          content: "group0",
          color: { background: "pink" }
        }
        // { id: 7, label: "angular.js", group: 2 }
      ],
      //   關係線數組
      edgesArray: [
        { from: 0, to: 1, label: "ddd" },
        { from: 1, to: 0, label: "aaa" },
        { from: 0, to: 2, label: "step1" },
        { from: 0, to: 3, label: "step1" },
        { from: 0, to: 4, label: "step1" },
        { from: 4, to: 5, label: "step2" },
        { from: 4, to: 6, label: "step2" },
        { from: 4, to: 7, label: "step2" }
      ],
      options: {},
      data: {}
    };
  },
  methods: {
    init() {
      let _this = this;
      //1.創建一個nodes數組
      _this.nodes = new Vis.DataSet(_this.nodesArray);
      //2.創建一個edges數組
      _this.edges = new Vis.DataSet(_this.edgesArray);
      _this.container = document.getElementById("network_id");
      _this.data = {
        nodes: _this.nodes,
        edges: _this.edges
      };
      _this.options = {
        autoResize: true, //網絡將自動檢測其容器的大小調整，並相應地重繪自身
        locale: "cn", //語言設置：工具欄顯示中文
        //設置語言
        locales: {
          cn: {
            //工具欄中文翻譯
            edit: "編輯",
            del: "刪除當前節點或關係",
            back: "返回",
            addNode: "添加節點",
            addEdge: "添加連線",
            editNode: "編輯節點",
            editEdge: "編輯連線",
            addDescription: "點擊空白處可添加節點",
            edgeDescription: "點擊某個節點拖拽連線可連接另一個節點",
            editEdgeDescription: "可拖拽連線改變關係",
            createEdgeError: "無法將邊連接到集羣",
            deleteClusterError: "無法刪除集羣.",
            editClusterError: "無法編輯羣集'"
          }
        },

        groups: {
          useDefaultGroups: true,
          myGroupId: {},
          ws: {
            //系統定義的形狀 dot等  這些官網都可以找到
            shape: "dot",
            color: "white"
          }
        },
        // 設置節點樣式
        nodes: {
          shape: "circle",
          size: 50,
          font: {
            //字體配置
            size: 32
          },
          color: {
            // border: "#2B7CE9", //節點邊框顏色
            background: "#97C2FC", //節點背景顏色
            highlight: {
              //節點選中時狀態顏色
              border: "#2B7CE9",
              background: "#D2E5FF"
            },
            hover: {
              //節點鼠標滑過時狀態顏色
              border: "#2B7CE9",
              background: "#D2E5FF"
            }
          },
          borderWidth: 0, //節點邊框寬度，單位爲px
          borderWidthSelected: 2 //節點被選中時邊框的寬度，單位爲px
        },
        // 邊線配置
        edges: {
          width: 1,
          length: 260,
          color: {
            color: "#848484",
            highlight: "#848484",
            hover: "#848484",
            inherit: "from",
            opacity: 1.0
          },
          shadow: true,
          smooth: {
            //設置兩個節點之前的連線的狀態
            enabled: true //默認是true，設置爲false之後，兩個節點之前的連線始終爲直線，不會出現貝塞爾曲線
          },
          arrows: { to: true } //箭頭指向to
        },
        //計算節點之前斥力，進行自動排列的屬性
        physics: {
          enabled: true, //默認是true，設置爲false後，節點將不會自動改變，拖動誰誰動。不影響其他的節點
          barnesHut: {
            gravitationalConstant: -4000,
            centralGravity: 0.3,
            springLength: 120,
            springConstant: 0.04,
            damping: 0.09,
            avoidOverlap: 0
          }
        },
        //用於所有用戶與網絡的交互。處理鼠標和觸摸事件以及導航按鈕和彈出窗口
        interaction: {
          hover: true,
          dragNodes: true, //是否能拖動節點
          dragView: true, //是否能拖動畫布
          hover: true, //鼠標移過後加粗該節點和連接線
          multiselect: true, //按 ctrl 多選
          selectable: true, //是否可以點擊選擇
          selectConnectedEdges: true, //選擇節點後是否顯示連接線
          hoverConnectedEdges: true, //鼠標滑動節點後是否顯示連接線
          zoomView: true //是否能縮放畫布
        },
        //操作模塊:包括 添加、刪除、獲取選中點、設置選中點、拖拽系列、點擊等等
        manipulation: {
          enabled: true, //該屬性表示可以編輯，出現編輯操作按鈕
          addNode: true,
          addEdge: true,
          // editNode: undefined,
          editEdge: true,
          deleteNode: true,
          deleteEdge: true
        }
      };

      _this.network = new Vis.Network(
        _this.container,
        _this.data,
        _this.options
      );
    },

    resetAllNodes() {
      let _this = this;
      _this.nodes.clear();
      _this.edges.clear();
      _this.nodes.add(_this.nodesArray);
      _this.edges.add(_this.edgesArray);
      _this.data = {
        nodes: _this.nodes,
        edges: _this.edges
      };
      //   network是一種用於將包含點和線的網絡和網絡之間的可視化展示
      _this.network = new Vis.Network(
        _this.container,
        _this.data,
        _this.options
      );
    },
    resetAllNodesStabilize() {
      let _this = this;
      _this.resetAllNodes();
      _this.network.stabilize();
    }
  },

  mounted() {
    this.init();
    // 點擊事件
    this.network.on("click", params => {
      console.log("點擊", params.nodes);
      // this.network.addEdgeMode();
    });
    // 點擊鼠標右鍵事件
    this.network.on("oncontext", params => {
      console.log("右擊", params);
      this.dialogVisible = true;
    });
  }
};
</script>
<style lang="less">
</style>