InteractiveGraph图谱中vue项目中如何使用

一、下载js和css和字体
二、vue2.0项目中引用
三、grap组件

一、下载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--><divclass="toolbarPanel igraph-dockable igraph-draggable"igraph-control-role="ToolbarCtrl"igraph-dock-position="B:-6,0"><div class="toolbar"></div></div><!--info box--><divclass="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--><divclass="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--><divclass="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>