current position:Home>Vue uses vis to implement topology map

Vue uses vis to implement topology map

2022-05-15 03:33:02Elegant pig

visjs Official documents
visjs Example

1. install

npm install vis

2. Packaged into components  

<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import vis from "vis";
let options;
export default {
  data() {
    return {
      network: "",
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    edges: {
      type: Array,
      default: () => [
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 }
      ]
    },
    nodes: {
      type: Array,
      default: () => [
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" }
      ]
    }
  },
  watch: {
    nodes() {
      this.updateVisTopology()
    }
  },
  mounted() {
    this.createVisTopology();
  },
  methods: {
    //   Create a vis Topology 
    createVisTopology() {
      // create an array with nodes
      let nodes = new vis.DataSet(this.nodes);

      // create an array with edges
      let edges = new vis.DataSet(this.edges);

      // provide the data in the vis format
      let data = {
        nodes: nodes,
        edges: edges,
      };
      options = {
        // Node style 
        nodes: {
          shape: "box", // Set nodes node The style is rectangular   Optional value :ellipse | circle | database | box | text
          fixed: false, // node node Fixed and immovable 
          font: {
            color: "white", // The color of the font 
            size: 30, // Display font size 
          },
          scaling: {
            min: 16,
            max: 32, // Scale the effect 
          },
        },
        // The style of the connector 
        edges: {
          color: {
            color: "rgb(97, 168, 224)",
            highlight: "rgb(97, 168, 224)",
            hover: "green",
            inherit: "from",
            opacity: 1.0,
          },
          font: {
            align: "top", // Connector text location 
          },
          smooth: true, // Whether to display the direction arrow 
          arrows: { to: true }, // The arrow points to from node 
        },
        layout: {
          // Locate nodes in a hierarchical manner 
          hierarchical: {
            direction: "LR", // Hierarchical sorting direction 
            sortMethod: "directed", // Hierarchical sorting method 
            levelSeparation: 400, // The distance between different levels 
          },
        },
        interaction: {
          navigationButtons: true,
          hover: true, // After the mouse is moved, bold the node and connecting line 
          selectConnectedEdges: false, // Whether to display connecting lines after selecting nodes 
        },
      };

      // initialize your network!
      this.network = new vis.Network(document.getElementById(this.id),data,options);
    },
    updateVisTopology() {
      this.network.setData({
        nodes: this.nodes,
        edges: this.edges
      })
      // this.network.setOptions(options)
    }
  },
};
</script>

3. Components use  

<template>
  <div style="width: 100%;height: 100%;">
    <div class="vis-container">
      <VisTopology :id="'VisTopology'" />
    </div>
  </div>
</template>
<script>
import VisTopology from './vis.vue'
export default {
  components: { VisTopology }
}
</script>
<style scoped>
.vis-container {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

design sketch  

 

copyright notice
author[Elegant pig],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/131/202205111539275966.html

Random recommended