VUE中用AntV G6 + element 实现关系图展示

1.效果图 (我的需求是做字段血缘展示)

2.官方文档：https://antv-g6.gitee.io/zh/examples/tree/mindmap#hCustomSideMindmap

3.1

npm install @antv/g6 --save

3.2

 <div id="mountNode" ></div>

3.3 method

initG6() {console.log(this.data)const nodes = this.data.nodes// 创建 G6 图实例this.graph = new G6.Graph({container: 'mountNode',  // 画布容器idwidth: 1400,  // 画布宽度height: 1000,    // 画布高度modes: {default: ['drag-canvas', 'click-select']},layout: {type: 'mindmap',direction: 'H',align: 'UL',nodesep: 50,ranksep: 50,  //层次距离controlPoints: true,},//默认节点样式设置defaultNode: {size: [150, 50],type: 'rect',color: "#ffffff",style: {lineWidth: 2,stroke: '#5B8FF9',fill: '#C6E5FF',radius: 5},labelCfg: {style: {fontSize: 12,},},},// 默认的边样式设置defaultEdge: {type: 'polyline',size: 1,color: '#c8c8c8',style: {endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z',fill: '#c8c8c8',},radius: 5,},},})this.chart = this.graphthis.graph.data(this.data)  // 读取数据this.graph.render()  // 渲染数据this.graph.on('click', (ev) => {  // 监听节点点击事件this.evt = ev.itemconst shape = ev.target;if (ev.item) {const item = ev.item;const type = item.getType();// console.log('点击节点shape,item,type',shape,item,type)this.selectedItem = ev.item._cfg.modelconsole.log('treecomplex click 当前节点信息', this.selectedItem)}});if (typeof window !== 'undefined')window.onresize = () => {if (!this.graph || this.graph.get('destroyed')) return;if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight) return;this.graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);};},

3.4

  mounted() {this.initG6();}

3.5 销毁画布定义 chart

    // 避免多次渲染数据 销毁画布if (this.chart !== '') {this.chart.destroy()}

3.6 针对我的需求设计

写了一个血缘的按钮，点击后血缘关系在对话框 el-dialog 上弹框展示

点击后的方法：

    handleBlood(data) {this.bloodVisible = true;// 避免多次渲染数据 销毁画布if (this.chart !== '') {this.chart.destroy()}getColumnLineage({id: data.id}).then(res => {this.data = res.result;this.initG6()})},

getColumnLineage 是请求后端的接口，我的血缘关系是根据不同入参动态展示的，所以data信息就不给大家粘贴啦

VUE中用AntV G6 + element 实现关系图展示相关推荐

vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现 npm install @antv/g6 --save <template><div id="app">&l ...
vue中使用antv/G6完成流程图
目录效果展示后台数据处理后台数据安装完整js代码效果展示自定义节点 G6.registerNode 根据后端返回数据生成流程图后台数据返回的类似数据,需要parentId数组即上级节 ...
vue中使用antv/g6 绘制关系图、结构图_CAD小白必看！手把手教你如何看懂室内设计施工图图纸（平面立面剖面大样节点图）...
号外!号外!你们心心念念的干货来了~ 室内设计施工图视频教程+CAD图库可供大家学习研究,希望能对大家有所帮助.如果你喜欢请点赞收藏哦,谢谢~ 本期干货:室内设计施工图视频教程+CAD图库领取方式 ...
vue中使用antv/g6 绘制关系图、结构图_高级图标绘制设计软件最新版 | MyDraw 4.1.2...
THE START 更新高级图标绘制设计软件最新版,MyDraw 4.1.2.还有一些类似的软件Xmind.Xmind ZEN等,都可在小编的菜单栏找到.进入主题! MyDraw是先进的绘图软件和矢量 ...
AntV G6自定义树状图TreeGraph
AntV G6自定义树状图TreeGraph 只是为了记录下自己写的G6组件成果 G6去除生成图的动画效果animate const graph = new G6.TreeGraph({animate ...
vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
项目中使用antv G6 实现节点链路之间动态效果
项目前端开发框架是使用VUE 项目需求:在不同的服务节点之间,根据不同的链路数据,显示出节点之间的链路状态,同时实现节点之间的动态效果. 先看效果 1 下载依赖包 # 使用CND引入 npm i @a ...
vue族谱架构_vue.js中使用d3.js画家谱关系图
项目中需要做个家谱图,网上查了好多资料没找到合适的,就自己写个简单的,方便以后查看,附上效果图首先展示父亲.配偶.子女,三代人信息,然后选择其他人可以展开他的三代关系.如下图下面是代码,这个关系图 ...

VUE中用AntV G6 + element 实现关系图展示

VUE中用AntV G6 + element 实现关系图展示相关推荐

最新文章

热门文章

VUE中 用AntV G6 + element 实现关系图展示

VUE中 用AntV G6 + element 实现关系图展示相关推荐

最新文章

热门文章

VUE中用AntV G6 + element 实现关系图展示

VUE中用AntV G6 + element 实现关系图展示相关推荐