HTML5 （canvase）拓撲圖、關系圖及vis.js關系圖的使用

HTML5 （canvase）拓撲圖、關系圖：

http://www.jtopo.com/demo/layout-circle.html

 

vis.js網址：

https://visjs.org/

 

vue項目中的使用：

1、npm install vis

 

2、在關系圖的頁面引入vis

 

　

import vis from 'vis';   
   或 
const vis=require("vis");

3、使用：

 // vis關系圖初始化
  public init(body: any) {
    /**處理關系類型數據 */
    let dataArr: any = [];
    /**定義links的數組 */
    let linksArr: any = [];
    /**處理返回的其他數據 */
    // 節點數
    body.forEach((item: any, index: number) => {
      // if (index < 20) {
      let obj: any = {
        id: "",
        shape: "dot",
        color: "",
        label: ""
      };
      let objB: any = {
        id: "",
        shape: "dot",
        color: "",
        label: ""
      };
      obj.id = item.asfzh;
      obj.label = item.asfzh;
      obj.color = item.sfzZdrFlag1 === 1 ? "#f7220b" : "#2aa2f7";
      dataArr.push(obj);
      objB.id = item.bsfzh;
      objB.label = item.bsfzh;
      objB.color = item.sfzZdrFlag2 === 1 ? "#f7220b" : "#2aa2f7";
      dataArr.push(objB);
    });

    //關系
    body.forEach((item: any, index: number) => {
      // if (index < 20) {
      let linksObj: any = {
        from: "",
        to: "",
        label: "",
        font: {align: "top",color:"from"},
        arrows: "to"
      };
      linksObj.from = item.asfzh;
      linksObj.to = item.bsfzh;
      linksObj.label = `${item.cnt}`;   //必須是字符串 不能是數字
      linksArr.push(linksObj);
    });
    let strArr = [];
    let objArr = [];
    for (let i = 0; i < dataArr.length; i++) {
      if (strArr.indexOf(dataArr[i].id) == -1) {
        strArr.push(dataArr[i].id);
        objArr.push(dataArr[i]);
      }
    }

    const container = document.getElementById("network_id");
    let nodes = objArr;
    let edges = linksArr;
    const data = {
      nodes: nodes,
      edges: edges
    };
    //自定義
    const options = {
      autoResize: true,
      // physics:false,
      nodes: {
        shape: "dot",
        size: 12,
        font: {
          size: 12,
          color:'#8e8e8e'
        },
      },
      edges: {
        width: 1,
        smooth: {
          //設置兩個節點之前的連線的狀態
          enabled: true //默認是true，設置為false之后，兩個節點之前的連線始終為直線，不會出現貝塞爾曲線
        },
        font:{
          color:'#8e8e8e',
          strokeWidth: 0
        }
      },
      interaction: {
        dragNodes: true, //是否能拖動節點
        dragView: true, //是否能拖動畫布
        hover: true, //鼠標移過后加粗該節點和連接線
        multiselect: true, //按 ctrl 多選
        selectable: true, //是否可以點擊選擇
        selectConnectedEdges: true, //選擇節點后是否顯示連接線
        hoverConnectedEdges: true, //鼠標滑動節點后是否顯示連接線
        zoomView: true //是否能縮放畫布
      },
    };
    let network = new Vis.Network(container, data, options);
  }