使用antv/g6绘制关系图

效果图

代码实现

npm install @antv/g6 --save

<template><div id="app"><!-- <button @click="toUpdate">切换数据</button> --><div id="container"></div></div>
</template><script>
// import {init,update} from './utils/g6Utils.min.js';
import G6 from '@antv/g6';
// import insertCss from 'insert-css'export default {name: 'gpolyline',data () {return {};},methods: {},mounted () {const data = {nodes: [{id: 'node1',x: 700,y: 100,// size: [300, 60],label: 'node1\n换行',anchorPoints: [[0.5, 1],[0, 0.5]]},{id: 'node2',x: 700,y: 200,label: '2',anchorPoints: [[0.5, 0],[0.5, 1]]},{id: 'node3',x: 100,y: 100,label: '3',anchorPoints: [[1, 0.5],[0.5, 1]]},{id: 'node5',x: 100,y: 20,label: '5',anchorPoints: [[0, 0.5],[0.5, 1]]},{id: 'node4',x: 100,y: 200,label: '4',anchorPoints: [[0.5, 0],[0.5, 1]]},{id: 'node20',x: 100,y: 600,label: '20',anchorPoints: [[0, 0.5],[0.8, 1],[0.3, 0],[0.5, 0]]},{id: 'node20-1',x: 50,y: 675,label: '20-1',size: [100, 25],anchorPoints: [[1, 0.5],[0, 0.5]]},{id: 'node20-2',x: 50,y: 725,label: '20-2',size: [100, 25],anchorPoints: [[1, 0.5],[0, 0.5]]},{id: 'node6',x: 100,y: 350,label: '6',anchorPoints: [[0.5, 0],[0.3, 1],[0.8, 1]]},{id: 'node7',x: 300,y: 350,label: '7',anchorPoints: [[0.5, 0],[1, 0.5]]},{id: 'node8',x: 500,y: 350,label: '8',anchorPoints: [[0.5, 0],[1, 0.5]]},{id: 'node9',x: 700,y: 350,label: '9',anchorPoints: [[0.5, 0],[0.2, 1],[0.3, 1],[0.4, 1],[0.5, 1],[0.6, 1],[0.7, 1],[0.8, 1],[0.85, 1]]},{id: 'node18',x: 375,y: 450,label: '18',anchorPoints: [[0.5, 1],[1, 0.5]]},{id: 'node19',x: 375,y: 550,label: '19',anchorPoints: [[0.5, 0],[1, 0.5],[0.5, 1],[0, 0.6],[0, 0.3]]},{id: 'node19-1',x: 450,y: 625,size: [100, 25],label: '19-1',anchorPoints: [[0, 0.5],[1, 0.5]]},{id: 'node19-2',x: 450,y: 675,size: [100, 25],label: '19-1',anchorPoints: [[0, 0.5],[1, 0.5]]},{id: 'node19-3',x: 450,y: 725,size: [100, 25],label: '19-1',anchorPoints: [[0, 0.5],[1, 0.5]]}],edges: [{source: 'node1',target: 'node2',type: 'line',sourceAnchor: 0,// 该边连入 target 点的第 0 个 anchorPoint，targetAnchor: 0},{source: 'node1',target: 'node3',sourceAnchor: 1,// 该边连入 target 点的第 0 个 anchorPoint，targetAnchor: 0,label: '100%',labelCfg: {position: 'middle',refY: 10}},{source: 'node2',target: 'node9',sourceAnchor: 1,// 该边连入 target 点的第 0 个 anchorPoint，targetAnchor: 0,label: '100%',labelCfg: {position: 'end',refY: 40,refX: -10}},{source: 'node2',target: 'node7',sourceAnchor: 1,// 该边连入 target 点的第 0 个 anchorPoint，targetAnchor: 0,label: '100%',labelCfg: {position: 'end',refY: 40,refX: -10}},{source: 'node2',target: 'node8',sourceAnchor: 1,// 该边连入 target 点的第 0 个 anchorPoint，targetAnchor: 0,label: '100%',labelCfg: {position: 'end',refY: 40,refX: -10}},{source: 'node3',target: 'node4',sourceAnchor: 1,targetAnchor: 0,label: '100%',labelCfg: {position: 'middle',refY: 10}},{source: 'node4',target: 'node6',sourceAnchor: 1,targetAnchor: 0,label: '100%',labelCfg: {position: 'middle',refY: 10}},{source: 'node20',target: 'node5',sourceAnchor: 0,targetAnchor: 0,label: '100%',labelCfg: {position: 'middle',refY: -5}},{source: 'node18',target: 'node19',sourceAnchor: 0,targetAnchor: 0,label: '100%',labelCfg: {position: 'middle',refY: 10}},{source: 'node18',target: 'node9',style: {offset: 15,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333',startArrow: true},sourceAnchor: 1,targetAnchor: 1},{source: 'node19',target: 'node9',style: {offset: 15,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333',startArrow: true},sourceAnchor: 1,targetAnchor: 2},{source: 'node19',target: 'node19-1',style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 2,targetAnchor: 0},{source: 'node19',target: 'node19-2',style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 2,targetAnchor: 0},{source: 'node19',target: 'node19-3',style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 2,targetAnchor: 0},{source: 'node9',target: 'node19-1',style: {offset: 15,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333',startArrow: true},sourceAnchor: 3,targetAnchor: 1},{source: 'node9',target: 'node19-2',style: {offset: 15,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333',startArrow: true},sourceAnchor: 3,targetAnchor: 1},{source: 'node9',target: 'node19-3',style: {offset: 15,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333',startArrow: true},sourceAnchor: 3,targetAnchor: 1},{source: 'node6',target: 'node19',style: {offset: 15,endArrow: true,lineDash: [2, 2, 2],lineWidth: 2,stroke: '#333'},sourceAnchor: 2,targetAnchor: 4},{source: 'node19',target: 'node20',style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},label: '100%',labelCfg: {position: 'middle',refY: -10},sourceAnchor: 3,targetAnchor: 3},{source: 'node16',target: 'node16-1',label: '100%',labelCfg: {position: 'end',refX: 4,refY: 20},style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 0,targetAnchor: 0},{source: 'node16',target: 'node16-2',label: '100%',labelCfg: {position: 'end',refX: 4,refY: 20},style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 0,targetAnchor: 0},{source: 'node16',target: 'node16-3',label: '456',labelCfg: {position: 'end',refX: 120,refY: 20},style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 0,targetAnchor: 0},{source: 'node6',target: 'node20',style: {offset: 15,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333'},sourceAnchor: 1,targetAnchor: 2},{source: 'node6',target: 'node20-1',style: {offset: 55,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333'},sourceAnchor: 1,targetAnchor: 1},{source: 'node6',target: 'node20-2',style: {offset: 55,endArrow: true,lineWidth: 2,lineDash: [2, 2, 2],stroke: '#333'},sourceAnchor: 1,targetAnchor: 1},{source: 'node20',target: 'node20-1',label: 'trhtr',labelCfg: {position: 'end',refX: 130,refY: 25},style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 1,targetAnchor: 0},{source: 'node20',target: 'node20-2',label: '100%',labelCfg: {position: 'end',refX: 10,refY: 20},style: {offset: 15,endArrow: true,lineWidth: 2,stroke: '#333'},sourceAnchor: 1,targetAnchor: 0}]};const width = document.getElementById('container').scrollWidth;// const height = document.getElementById('container').scrollHeight || 500;const graph = new G6.Graph({container: 'container',width,height: 700,modes: {default: ['drag-canvas', 'zoom-canvas', 'click-select']},// 节点类型及样式defaultNode: {type: 'rect',size: [150, 50],style: {fill: '#DEE9FF',stroke: '#5B8FF9'}},// 连线类型及样式defaultEdge: {type: 'polyline',style: {// stroke: '#F6BD16',offset: 25,endArrow: true,lineWidth: 2,stroke: '#333'}}});graph.data(data);graph.render();}
};
</script><style>
#container {width: 100%;height: 100%;border: 1px saddlebrown solid;
}
</style>

文档地址

https://antv-g6.gitee.io/zh/docs/manual/introduction

vue中使用antv/g6 绘制关系图、结构图相关推荐

vue中使用antv/g6 绘制关系图、结构图_CAD小白必看！手把手教你如何看懂室内设计施工图图纸（平面立面剖面大样节点图）...
号外!号外!你们心心念念的干货来了~ 室内设计施工图视频教程+CAD图库可供大家学习研究,希望能对大家有所帮助.如果你喜欢请点赞收藏哦,谢谢~ 本期干货:室内设计施工图视频教程+CAD图库领取方式 ...
vue中使用antv/g6 绘制关系图、结构图_高级图标绘制设计软件最新版 | MyDraw 4.1.2...
THE START 更新高级图标绘制设计软件最新版,MyDraw 4.1.2.还有一些类似的软件Xmind.Xmind ZEN等,都可在小编的菜单栏找到.进入主题! MyDraw是先进的绘图软件和矢量 ...
vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
VUE中用AntV G6 + element 实现关系图展示
1.效果图 (我的需求是做字段血缘展示) 2.官方文档 :https://antv-g6.gitee.io/zh/examples/tree/mindmap#hCustomSideMindmap 3. ...
vue中使用antv/G6完成流程图
目录效果展示后台数据处理后台数据安装完整js代码效果展示自定义节点 G6.registerNode 根据后端返回数据生成流程图后台数据返回的类似数据,需要parentId数组即上级节 ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
【echarts】echarts绘制关系图
echarts绘制关系图,效果如图,粗麻编写,教程往下看 1.vue安装echarts npm install echarts 2.引入echarts 3.在VUE页面中编写遇到问题:关系数据显示不 ...
在vue中使用jsmind生成思维导图
在vue中使用jsmind生成思维导图前景: 项目中有涉及到多层级的数据结构,思维导图的方式更方便查看数据的关系技术实现:jsmind 实现效果: 安装 npm i jsmind 代码 <t ...
matlab怎么画两个自变量的图_关系图怎么画？一款实用的绘制关系图设计软件
关系图是指实体-联系图,是用来描述现实世界的概念模型.关系图应用范围很广.比如人物关系图.零件关系图等等.关系图主要由三部分构成:矩形框里写实体名.椭圆符号表示属性.菱形框中标明何种联系.同时还用线条 ...

vue中使用antv/g6 绘制关系图、结构图

使用antv/g6绘制关系图

效果图

代码实现

文档地址

vue中使用antv/g6 绘制关系图、结构图相关推荐

最新文章

热门文章