AntV-G6：画自动连线流程图

效果图

安装&引用js

安装和引用教程：

https://g6.antv.vision/zh/docs/manual/getting-started/#%E5%AE%89%E8%A3%85--%E5%BC%95%E7%94%A8

>>引用方式

1、在线引用

2、本地引用

代码块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>流程图-自动画线</title><style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body><div id="FlowChart"></div><!--画图容器-->
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="g6.js"></script><script>//假数据var data= {//节点内容nodes: [{id: "1",label: "系统管理员",    type: "check",}, {id: "2",label: "zyz",type: "pass",}, {id: "3",label: "张三",name:'selected',type: "fail",}, {id: "4",label: "李四",type: "stop",}, {id: "5",label: "王五",type: "check",}, {id: "6",label: "张三",type: "normal",}],//节点关联关系edges: [{source: "1",target: "2"}, {source: "2",target: "3"}, {source: "2",target: "4"}, {source: "2",target: "5"}, {source: "3",target: "6"}, {source: "4",target: "6"}, {source: "5",target: "6"}]};//父子关系计算var _extends = Object.assign || function(target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};//定义节点类型及图片   var nodeExtraAttrs = {nownode: {img: "/Scripts/plugins/AntV/nownode.png"},normal: {img: "/Scripts/plugins/AntV/normal.png"},pass: {img: "/Scripts/plugins/AntV/pass.png"},fail: {img: "/Scripts/plugins/AntV/fail.png"},check: {img: "/Scripts/plugins/AntV/check.png"},checked: {img: "/Scripts/plugins/AntV/checked.png"},stop: {img: "/Scripts/plugins/AntV/stop.png"},unchecked:{img: "/Scripts/plugins/AntV/unchecked.png"}};G6.registerNode("node", {drawShape: function drawShape(cfg, group) {var rect = group.addShape("image", {attrs: _extends({x: -30,y: -20,img:'/Scripts/plugins/AntV/normal.png',width: 60,height: 60,radius: 4,fill: "#FFD591",fillOpacity: 1}, nodeExtraAttrs[cfg.type])});return rect;},getAnchorPoints: function getAnchorPoints() {return [[0, 0.5], [1, 0.5]];}}, "single-shape");var graph = new G6.Graph({container: "mountNode",width: window.innerWidth - 110,height: window.innerHeight- 50,linkCenter: true,layout: {type: 'dagre',rankdir: 'LR',},modes: {default: ['drag-canvas', 'zoom-canvas']},defaultNode: {shape: "node",size: 30,anchorPoints: [[0, 0.5], [1, 0.5]],style: {fill: '#40a9ff',stroke: '#096dd9'},labelCfg: {position: 'top',style: {fill: "#595959",fontSize: 16}}},defaultEdge: {             shape: 'polyline',  // 在数据中已经指定 shape，这里无需再次指定style: {radius: 10,offset: 10,stroke: 'steelblue',lineWidth: 5}}});var i = 0;graph.edge(function() {i++;return {shape: 'line-arrow',//polylinecolor: '#A3B1BF',};});G6.registerEdge('line-arrow', {getPath: function getPath(points) {var startPoint = points[0];var endPoint = points[1];return [['M', startPoint.x, startPoint.y], ['L', endPoint.x / 2 + 1 / 2 * startPoint.x, startPoint.y], ['L', endPoint.x / 2 + 1 / 2 * startPoint.x, endPoint.y], ['L', endPoint.x, endPoint.y]];},}, 'line');graph.data(data);graph.render();</script>
</body>
</html>

代码内容描述

>>定位高度

document.documentElement.clientHeight；//页面html标签的高度，即浏览器高度

document.body.clientHeight；//页面body标签的高度，即所有内容高度

window.innerHeight；//返回窗口的文档显示区的高度

>>图形定义（详见API）

https://g6.antv.vision/zh/docs/api/TreeGraph

快速上手&简单示例&在线演示编辑器

https://g6.antv.vision/zh/docs/manual/getting-started

AntV-G6：画自动连线流程图相关推荐

Vuex和antv/g6实现在线绘制分析流程图功能
流程图绘制在项目中实际是一个复杂的应用,但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来,所以本文章仅抽取最基础的部分简单介绍流程图创建. ...
绕线画算法python_一种绕线画自动生成及加工的方法和设备与流程
本发明涉及技术领域,具体涉及一种绕线画自动生成及加工的方法和设备. 背景技术: 绕线画又称钉子画,简而言之,就是在木板上钉上钉子,然后在钉子间绕线,做出大概的轮廓,然后用线在钉子之间缠绕,组成几何图形 ...
antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
AntV G6设置连线箭头
效果如下: 主要代码: defaultEdge: {style: {lineWidth: 2, // 线宽stroke: '#778899', // 线的颜色endArrow: { // 设置终点箭头 ...
vue中使用antv/G6完成流程图
目录效果展示后台数据处理后台数据安装完整js代码效果展示自定义节点 G6.registerNode 根据后端返回数据生成流程图后台数据返回的类似数据,需要parentId数组即上级节 ...
vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
antv G6绘制流程图
先贴上实现的效果图 G6官网,关于G6的使用,可以自行进入官网查看. 按照官网可以绘制出简单的流程但是当实际绘制流程图时,简直是要被连接线的折点给搞崩溃. 节点配置项 anchorPoints:指定 ...
AntV G6 的坑之——从卡掉渣到满帧需要几步
AntV G6 是一款图可视化与分析开源引擎.<AntV G6 的坑之--XXX>系列文章持续更新中,总结常见问题及神坑解决方案.任何问题可在 GitHub Issue 中提问,求 Git ...
vue office在线编辑_VUE和Antv G6实现在线拓扑图编辑
我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. ...

AntV-G6：画自动连线流程图

AntV-G6：画自动连线流程图相关推荐

最新文章

热门文章