【vue3】使用vis-network绘制网络关系图失效问题

项目场景：

使用vue3+Network实现网络关系图

---

问题描述

根据网上许多教程编写代码，但页面中未能成功显示关系图

1.安装依赖
npm install vis-network
2.在vue中导入vis-network模块
import * as vis from ‘vis-network’
3.代码

<template>
  <div ref="chartRef" :style="{ height, width }" id="mynetwork"></div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue'
  // 这种写法没用
  import * as vis from 'vis-network'
  
  export default defineComponent({
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null)
      let network = vis.Network
      onMounted(() => {
        init()
      })
      function init() {
        // 节点
        var nodes = new vis.DataSet([
          { 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' },
        ])
        //  边
        var edges = new vis.DataSet([
          { from: 1, to: 3 },
          { from: 1, to: 2 },
          { from: 2, to: 4 },
          { from: 2, to: 5 },
          { from: 3, to: 3 },
        ])
        // create a network
        var container = document.getElementById('mynetwork')
        var data = {
          nodes: nodes,
          edges: edges,
        }
        var options = {}
        if (container) {
          network = new vis.Network(container, data, options)
        }
      }
      return { chartRef, network }
    },
  })
</script>

---

原因分析：

不应该安装vis-network包，而是安装vis包

---

解决方案：

1.安装vis依赖
npm install vis
2.引入
import { DataSet, Network } from ‘vis’
3.代码

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue'
  import { DataSet, Network } from 'vis'

  // 引入图片类型在 src\utils\lib\echarts.ts
  export default defineComponent({
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null)
      let network = Network
      onMounted(() => {
        init()
      })
      function init() {
        // 节点
        var nodes = new DataSet([
          { 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' },
        ])
        //  边
        var edges = new DataSet([
          { from: 1, to: 3 },
          { from: 1, to: 2 },
          { from: 2, to: 4 },
          { from: 2, to: 5 },
          { from: 3, to: 3 },
        ])
        // create a network
        var container = document.getElementById('mynetwork')
        var data = {
          nodes: nodes,
          edges: edges,
        }
        var options = {}
        if (container) {
          network = new Network(container, data, options)
        }
      }
      return { chartRef, network }
    },
  })
</script>

总结：

初次使用network，还不太熟悉，有大佬知道为什么需要引用vis而不是vis-network的欢迎评论