一、下载js和css和字体

//在这里面找
https://github.com/grapheco/InteractiveGraph/blob/master/dist/examples/example1.html

二、vue2.0项目中引用

//main.js中全局引入$ 和 igraph
import $ from '../src/views/pc/policy/component/lib/jquery-3.2.1/jquery-3.2.1.min';
import '../src/views/pc/policy/component/lib/jquery-3.2.1/jquery-ui';
window.jQuery = $;
window.$ = $;

import igraph from '../src/views/pc/policy/component/lib/interactive-graph-0.1.0/interactive-graph.min.js';
window.igraph = igraph;

三、grap组件

<template>
  <div class="graph-wrap">
    <div style="height: 100%">
      <div id="graphArea"></div>
    </div>
    <!--all UI controls-->
    <div>
      <!--toolbar-->
      <div
        class="toolbarPanel igraph-dockable igraph-draggable"
        igraph-control-role="ToolbarCtrl"
        igraph-dock-position="B:-6,0"
      >
        <div class="toolbar"></div>
      </div>
      <!--info box-->
      <div
        class="infoPanel igraph-dockable igraph-draggable"
        igraph-control-role="InfoBoxCtrl"
        igraph-dock-position="A:10,80"
      >
        <div>
          <div class="infoPanel1"></div>
          <div class="infoPanel2">
            <span align="center" class="fa fa-close fa-lg btnCloseInfoPanel"></span>
          </div>
        </div>
        <div class="infoBox"></div>
      </div>
      <!--search box-->
      <div
        class="searchPanel igraph-dockable igraph-draggable"
        igraph-control-role="SearchBoxCtrl"
        igraph-dock-position="A:10,20"
      >
        <div class="searchPanel1">
          <input class="igraph-searchbox" type="text" size="16" placeholder="input keyword" />
        </div>
        <div class="searchPanel2">
          <span align="center" class="fa fa-search fa-lg" />
        </div>
      </div>
      <!--status bar-->
      <div
        class="statusPanel igraph-dockable"
        igraph-control-role="StatusBarCtrl"
        igraph-dock-position="C:-100,0"
      >
        <div class="statusBar"></div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: 'graphAtlas',
  props: {
    id: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      igraph.i18n.setLanguage('chs');
      var app = new igraph.GraphNavigator(document.getElementById('graphArea'));
      app.loadGson(
        process.env.VUE_APP_WEB_API +
          `接口`,
        {
          onGetNodeDescription: function (node) {
            if (node.type === 'error') return;

            var description = '<p >';
            description += '<b>' + node.label + '</b>' + '[' + node.id + ']';
            description += '</p>';
            if (node.info !== undefined) {
              description += '<p align=left>' + node.info + '</p>';
            }

            return description;
          },
        },
        function () {
          $('.fa-transgender-alt,.fa-strikethrough,.fa-circle-o,.fa-search,.fa-terminal').click();
        }
      );
    });
  },
};
</script>

<style scoped lang="scss">
@import './lib/interactive-graph-0.1.0/interactive-graph.min.css';
@import './lib/jquery-3.2.1/jquery-ui.css';
@import './lib/font-awesome-4.7.0/css/font-awesome.min.css';
.graph-wrap {
  height: 568px;
  width: 818px;
  padding: 12px;

  #graphArea {
    height: 568px;
  }
}
</style>

链接: https://blog.csdn.net/TgqDT3gGaMdkHasLZv/article/details/104403997
链接: https://juejin.cn/post/6844903679871418375