|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <!-- vis关系图基础展示 -->
- <div>
- <!--width,height 画布的宽度,高度。 可以是百分比或像素,一般在dom元素上设置 -->
- <div id="network_id" class="network" style="width:600px; height:50vh;border:1px solid #ccc;"></div>
- </div>
- <script>
- import Vis from "vis";
- export default {
- data() {
- return {
- dialogVisible: false,
- nodes: [],
- edges: [],
- // network:null,
- container: null,
- // 节点数组
- nodesArray: [
- {
- id: 0,
- name: "小明",
- group: "people",
- },
- {
- id: 1,
- name: "大立",
- group: "people",
- },
- {
- id: 2,
- name: "珊珊",
- group: "people",
- },
- {
- id: 3,
- name: "旺旺",
- group: "animal",
- },
- {
- id: 4,
- name: "咕咕",
- group: "animal",
- },
- ],
- // 关系线数组
- edgesArray: [
- { id: "e1", from: 0, to: 3, label: "宠物" },
- { id: "e2", from: 1, to: 4, label: "宠物" },
- { id: "e3", from: 0, to: 1, label: "好朋友" },
- { id: "e4", from: 1, to: 2, label: "好朋友" },
- ],
- options: {},
- data: {},
- };
- },
- mounted() {
- this.init();
- this.network.moveTo({ scale: 0.8 });
- var param = { nodes: this.nodesArray, edges: this.edgesArray };
- this.addNetworkParams(param);
- },
- methods: {
- // 初始化network
- init() {
- //1.创建一个nodes对象
- this.nodes = new Vis.DataSet([]);
- //2.创建一个edges对象
- this.edges = new Vis.DataSet([]);
- // 3.创建一个网络拓扑图
- this.container = document.getElementById("network_id");
- // 4.创建data对象
- this.data = {
- nodes: this.nodes,
- edges: this.edges,
- };
- // 5.全局配置
- this.options = {
- autoResize: true, //网络将自动检测其容器的大小调整,并相应地重绘自身
- locale: "cn", //语言设置:工具栏显示中文
- //设置语言
- locales: {
- cn: {
- //工具栏中文翻译
- edit: "编辑",
- del: "删除当前节点或关系",
- back: "返回",
- addNode: "添加节点",
- addEdge: "添加连线",
- editNode: "编辑节点",
- editEdge: "编辑连线",
- addDescription: "点击空白处可添加节点",
- edgeDescription: "点击某个节点拖拽连线可连接另一个节点",
- editEdgeDescription: "可拖拽连线改变关系",
- createEdgeError: "无法将边连接到集群",
- deleteClusterError: "无法删除集群.",
- editClusterError: "无法编辑群集'",
- },
- },
- //该配置项主要用来生成一个可视化的配置器
- configure: {
- enabled: true,
- filter: "nodes,edges",
- container: this.container,
- showButton: true,
- },
- // 组模块
- groups: {
- useDefaultGroups: true,
- myGroupId: {},
- people: {
- shape: "circle",
- color: { background: "#fd91b7" },
- font: { color: "white" },
- },
- animal: {
- shape: "dot",
- color: { background: "#7ed6df" },
- },
- },
-
- // 设置节点样式
- nodes: {
- shape: "ellipse", //节点的外观。为circle时label显示在节点内,为dot时label显示在节点下方
- size: 30, //节点的大小,
- shadow: false, //如果为true,则节点使用默认设置投射阴影。
- font: {
- //字体配置
- size: 20,
- color: "rgb(117, 218, 167)",
- align: "center",
- },
- color: {
- border: "transparent", //节点边框颜色
- background: "#fd91b7", //节点背景颜色
- highlight: {
- //节点选中时状态颜色
- border: "rgb(117, 218, 167)",
- background: "rgb(117, 218, 167)",
- },
- hover: {
- //节点鼠标滑过时状态颜色
- border: "#dff9fb",
- background: "#88dab1",
- },
- },
- margin: 5, //当形状设置为box、circle、database、icon、text;label的边距
- widthConstraint: 100, //设置数字,将节点的最小和最大宽度设为该值,当值设为很小的时候,label会换行,节点会保持一个最小值,里边的内容会换行
- borderWidth: 1, //节点边框宽度,单位为px
- borderWidthSelected: 3, //节点被选中时边框的宽度,单位为px
- labelHighlightBold: false, //确定选择节点时标签是否变为粗体
- },
- // 边线配置
- edges: {
- width: 1,
- length: 200,
- color: {
- color: "#848499",
- highlight: "rgb(117, 218, 167)",
- hover: "#88dab1",
- inherit: "from",
- opacity: 1.0,
- },
- font: {
- color: "#343434",
- size: 18, // px
- face: "arial",
- background: "none",
- strokeWidth: 2, // px
- strokeColor: "#ffffff",
- align: "horizontal",
- multi: false,
- vadjust: 0,
- bold: {
- color: "#343434",
- size: 14, // px
- face: "arial",
- vadjust: 0,
- mod: "bold",
- },
- ital: {
- color: "#343434",
- size: 14, // px
- face: "arial",
- vadjust: 0,
- mod: "italic",
- },
- boldital: {
- color: "#343434",
- size: 14, // px
- face: "arial",
- vadjust: 0,
- mod: "bold italic",
- },
- mono: {
- color: "#343434",
- size: 15, // px
- face: "courier new",
- vadjust: 2,
- mod: "",
- },
- },
- shadow: false,
- smooth: {
- //设置两个节点之前的连线的状态
- enabled: true, //默认是true,设置为false之后,两个节点之前的连线始终为直线,不会出现贝塞尔曲线
- },
- arrows: { to: true }, //箭头指向to
- },
- // 布局
- layout: {
- randomSeed: 1, //配置每次生成的节点位置都一样,参数为数字1、2等
- // hierarchical: {
- // direction: "LR", //UD:上下 DU:下上 LR:左右 RL:右左
- // sortMethod: "directed",
- // }, //层级结构显示}
- },
- //物理引擎-计算节点之前斥力,进行自动排列的属性
- physics: {
- enabled: true, //默认是true,设置为false后,节点将不会自动改变,拖动谁谁动。不影响其他的节点
- barnesHut: {
- gravitationalConstant: -4000,
- centralGravity: 0.3,
- springLength: 120,
- springConstant: 0.04,
- damping: 0.09,
- avoidOverlap: 0,
- },
- },
- //用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
- interaction: {
- dragNodes: true, //是否能拖动节点
- dragView: true, //是否能拖动画布
- hover: true, //鼠标移过后加粗该节点和连接线
- multiselect: true, //按 ctrl 多选
- selectable: true, //是否可以点击选择
- selectConnectedEdges: true, //选择节点后是否显示连接线
- hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
- hideEdgesOnDrag: true, //拖动视图时不会绘制边
- zoomView: true, //是否能缩放画布
- },
- //操作模块:包括 添加、删除、获取选中点、设置选中点、拖拽系列、点击等等
- manipulation: {
- enabled: true, //该属性表示可以编辑,出现编辑操作按钮
- addNode: true,
- addEdge: true,
- // editNode: undefined,
- editEdge: true,
- deleteNode: true,
- deleteEdge: true,
- },
- };
- // 6.初始化网络拓扑图
- this.network = new Vis.Network(this.container, this.data, this.options);
- },
- //扩展节点 增加nodes和edges集合参数
- addNetworkParams(param) {
- //添加节点
- for (var i = 0; i < param.nodes.length; i++) {
- var node = param.nodes[i];
- console.log("node=", node);
- this.nodes.add({
- label: node.name,
- ...node,
- });
- console.log("nodes=", this.nodes);
- }
- //添加关系
- for (var i = 0; i < param.edges.length; i++) {
- var edge = param.edges[i];
- this.edges.add({
- ...edge,
- });
- }
- },
- },
- };
- </script>
- <style lang="less">
- </style>
- </body>
- </html>
|