vue集成vis-network实现拓扑图

vis.js官方文档：https://visjs.org/
vis-network中文文档：https://ame.cool/pages/a7d858/

1. 环境准备

前提：电脑已安装配置npm和node.js

在vue项目中安装vis的命令：

npm install vis --save-dev

如果当前vue项目没有安装sass：

npm install sass-loader --save-dev
npm install node-sass --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{test: /\.scss$/,loaders: ['style', 'css', 'sass']
}

然后在style标签里面加入lang=“scss”即可
2. 示例代码
（1）在组件中引入vis

import { DataSet, Network } from 'vis'

（2）定义dom

<template><div id="view_content"></div>
</template>

（3）容器渲染

<script>import { DataSet, Network } from 'vis'export default {name: 'Demo',data() {return {}},created() {},mounted() {this.init()},methods: {init() {// // create an array with nodesvar 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' },])// // create an array with edgesvar edges = new DataSet([{ from: 1, to: 3 },{ from: 1, to: 2 },{ from: 2, to: 4 },{ from: 2, to: 5 },])// create a networkvar container = document.querySelector('#view_content')// provide the data in the vis formatvar data = {nodes: nodes,edges: edges,}var options = {//节点样式nodes: {shape: 'box', //设置节点node样式为矩形fixed: false, //节点node固定可移动font: {color: 'red', //字体的颜色size: 20, //显示字体大小},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节点// physics:false},layout: {//以分层方式定位节点hierarchical: {direction: 'LR', //分层排序方向sortMethod: 'directed', //分层排序方法levelSeparation: 400, //不同级别之间的距离},},interaction: {navigationButtons: true,// hover: true, //鼠标移过后加粗该节点和连接线selectConnectedEdges: false, //选择节点后是否显示连接线},}// initialize your network!this.network = new Network(container, data, options)// this.network.on('click', (e) => this.showDetail(e)) //单击事件// this.network.on('doubleClick', (e) => this.enterService(e)) //双击事件//生成图后才生成canvas元素，此处设置画布大小// let element = document.getElementsByTagName('canvas')[0]// element.height = '600'},},}
</script>

（4）自定义样式

<style lang="scss" scoped>.view_content {width: 800px;height: 600px;.vis-network {height: 500px;}}
</style>

3.效果展示

vue集成vis-network实现拓扑图相关推荐

vue使用Vis.Network制作图谱
//首先要加载VIS npm install vis --save//在main.js中引入配置项 import "vis/dist/vis.css"//在使用的页面引入该组件 i ...
Vue使用vis实现拓扑图
visjs官方文档 visjs示例 1. 安装 npm install vis 2. 封装成组件 <template><div :id="id" style=&q ...
Vue.js中使用vis network出现的点和线更新问题
发现问题有一段时间,中文网一直没搜到结果,最终还是在github的已关闭issue里翻出了历史答案,简单翻译其中回答的部分内容,记录如下. 1.环境前端工程vue.js,版本2.6.11. vis- ...
vue 拓扑组件_Vue 集成 vis-network 实现网络拓扑图的方法_心病_前端开发者
vis. https://visjs.org/ vs code 下安装命令 npm install vis-network 在 const vis = require("vis-netwo ...
vis network（visjs）安装简单使用
vis.js可视化的出发点之一是它们可以处理动态数据,并允许对数据进行操作.为了实现这一点,vis.js包括一个基于灵活键/值 DataSet并DataView处理非结构化JSON数据的功能. 数据集 ...
Electron中与Vue集成流程
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
Node.js、Npm、MVVM模式、idea的vue集成
Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...
如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...

vue集成vis-network实现拓扑图

1. 环境准备

vue集成vis-network实现拓扑图相关推荐

最新文章

热门文章