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);
  }