Vue使用vis实现拓扑图

visjs官方文档
visjs示例

1. 安装

npm install vis

2. 封装成组件

<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: {//  创建一个vis拓扑图createVisTopology() {// create an array with nodeslet nodes = new vis.DataSet(this.nodes);// create an array with edgeslet edges = new vis.DataSet(this.edges);// provide the data in the vis formatlet data = {nodes: nodes,edges: edges,};options = {//节点样式nodes: {shape: "box", //设置节点node样式为矩形 可选值：ellipse | circle | database | box | textfixed: false, //节点node固定不可移动font: {color: "white", //字体的颜色size: 30, //显示字体大小},scaling: {min: 16,max: 32, //缩放效果比例},},//连接线的样式edges: {color: {color: "rgb(97, 168, 224)",highlight: "rgb(97, 168, 224)",hover: "green",inherit: "from",opacity: 1.0,},font: {align: "top", //连接线文字位置},smooth: true, //是否显示方向箭头arrows: { to: true }, //箭头指向from节点},layout: {//以分层方式定位节点hierarchical: {direction: "LR", //分层排序方向sortMethod: "directed", //分层排序方法levelSeparation: 400, //不同级别之间的距离},},interaction: {navigationButtons: true,hover: true, //鼠标移过后加粗该节点和连接线selectConnectedEdges: false, //选择节点后是否显示连接线},};// 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. 组件使用

<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>

效果图

Vue使用vis实现拓扑图相关推荐

vue用vis插件实现网络拓扑图
安装引入vis npm安装vis npm install vis 引入vis import { DataSet, Network } from 'vis'; vis使用示例 methods:{glob ...
vue集成vis-network实现拓扑图
vis.js官方文档:https://visjs.org/ vis-network中文文档:https://ame.cool/pages/a7d858/ 1. 环境准备前提:电脑已安装配置npm和n ...
vue使用svg画拓扑图（关系图）拖拽缩放
概述项目刚开始用的echarts画的拓扑图,echarts有个关系图可以直接画出来,但是上个前端在拖拽功能上留了bug,我眼睛都快看瞎了,都没找出来哪里出问题,还找了各种文章借鉴学习都没搞定后来跑 ...
vue中echarts书写拓扑图
最近在做拓扑图找了下前端常用的组件:jTopo(感觉有点老).Vis.js(文档是英文的,不太容易读).D3(功能强大需要自己实现).ECharts(同样需要自己实现) 由于图形上的交互并没有需要特别 ...
vue使用Vis.Network制作图谱
//首先要加载VIS npm install vis --save//在main.js中引入配置项 import "vis/dist/vis.css"//在使用的页面引入该组件 i ...
手把手教你使用vue创建第一个vis.js
先看一下实现效果吧 ,如下图 : 为什么要写这篇文章呢?因为之前有浅浅的了解一下vis.js,后期开发中没有使用vis,所以太深奥的也不懂,但是当时是用js写的.这两天有人问我用vue怎么写,然后 ...
vis实现类知识图谱的拓扑图
vis.js可视化的出发点之一是它们可以处理动态数据,并允许对数据进行操作.为了实现这一点,vis.js包括一个基于灵活键/值 DataSet并DataView处理非结构化JSON数据的功能. 数据集 ...
Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
这里主要是针对vis的network图进行节点动态添加图用的是vis.js,表单使用的是element-ui 程序运行截图如下: 添加一个节点: 这里是不需要刷新页面就能添加的. 程序结构如下: 关 ...
Web前端文档阅读笔记-vis.js在vue cli中的使用
程序运行截图如下: 首先要用npm导入的vis包 npm run vis 程序结构如下: 源码如下: HelloWorld.vue <template><div id="n ...

Vue使用vis实现拓扑图

1. 安装

2. 封装成组件

3. 组件使用

效果图

Vue使用vis实现拓扑图相关推荐

最新文章

热门文章