antvG6 流程图效果展示

antvG6 流程图

准备工作

如果你已经安装步骤完成相关安装，可直接创建页面复制代码
也可可直接下载我的demo

demo地址：vue-antvg6地址

vue-antvg6简易包

git clone https://gitee.com/shuaizi010/vue-antvg6.git
cd 项目目录
npm install

我是用panjiachen的vue-admin-tempalte，来做例子的框架，在上面做示例页面

1 安装vue-admin-template

git clone https://github.com/PanJiaChen/vue-admin-template.git

2进入目录安装所需包

cd vue-admin-template
npm install

3 安装必备库，antv/g6，insert-css

npm install @antv/g6 --save
npm install insert-css

4新建页面配置路由

在src/router/index.js加入自己定义的路由

{path: '/g6dagre',component: Layout,redirect: '/g6dagre/index2',children: [{path: 'index2',name: 'G6dagre',component: () => import('@/views/g6dagre/index2'),meta: { title: 'G6dagre', icon: 'dashboard' }}]},

5流程图页面代码

参考地址

antvG6 Dagre 流程图

主页面代码

<template><el-row :gutter="10" class="container"><el-col :span="2"><el-button type="" @click="downloadImage">导出</el-button></el-col><el-col :span="24"><div class="whr100" id="dataDiv"></div></el-col></el-row>
</template>
<script>
import G6 from "@antv/g6";
import insertCss from "insert-css";
insertCss(`.g6-tooltip {max-width: 600px;max-height: 500px;overflow-y: auto;position: absolute;left: -150px;z-index: 5;border: 1px solid #e2e2e2;border-radius: 4px;font-size: 14px;color: #545454;background-color: rgba(255, 255, 255, 0.9);padding: 20px 20px;box-shadow: rgb(174, 174, 174) 0px 0px 10px;text-align: justify;text-justify: newspaper;word-break: break-all;}.tooltip-header{font-size:16px;}
`);
var graph = {};
//根据节点状态颜色
const dataTypeColor = {100: "#EEBC20",200: "#5BD8A6",300: "#F46649",
};
export default {name: "g6dagre",data() {return {dagreData: [],};},created() {//获取json数据this.dagreData = require("@/assets/dagreData2.json");this.$nextTick(() => {this.init();});},methods: {init() {// 节点重定义G6.registerNode("flow",{drawShape(cfg, group) {const rect = group.addShape("rect", {attrs: {x: -75,y: -25,width: 150,height: 50,radius: 5,stroke: "#5B8FF9",fill: dataTypeColor[cfg.dataType],lineWidth: 3,},name: "rect-shape",});if (cfg.name) {group.addShape("text", {attrs: {text: cfg.name,x: 0,y: 0,fill: "#00287E",fontSize: 14,textAlign: "center",textBaseline: "middle",fontWeight: "bold",},name: "text-shape",});}return rect;},},"single-node");const container = document.getElementById("dataDiv");const width = container.scrollWidth;const height = container.scrollHeight || 900;graph = new G6.Graph({container: "dataDiv",width,height,defaultNode: {type: "flow",},defaultEdge: {type: "polyline",style: {radius: 5,endArrow: true,lineWidth: 2,stroke: "#C2C8D5",},},nodeStateStyles: {selected: {stroke: "#d9d9d9",fill: "#5394ef",},},modes: {default: ["drag-canvas","zoom-canvas","click-select",{type: "tooltip",formatText(model) {const cfg = model.conf;const text = [];cfg.forEach((row) => {text.push(row.label + ":" + row.value + "<br>");});return text.join("\n");},offset: 10,},],},});graph.read(this.dagreData);graph.fitView();if (typeof window !== "undefined")window.onresize = () => {if (!graph || graph.get("destroyed")) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};},downloadImage() {graph.downloadFullImage(Math.random().toString(16));},},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.whr100 {height: 100%;width: 100%;position: relative;
}
</style>

6数据json代码

{"nodes": [{"id": "1","dataType": "100","name": "生产部门","x": -300,"y": 200,"conf": [{"label": "生产入库","value": "111"}]},{"id": "2","dataType": "200","name": "入库","x": 0,"y": 200,"conf": [{"label": "进入库房","value": "222"}]},{"id": "3","dataType": "300","name": "入库单","x": 300,"y": 200,"conf": [{"label": "入库信息录入系统","value": "333"}]},{"id": "4","dataType": "100","name": "检验员","x": 600,"y": 200,"conf": [{"label": "收到产品和入库单","value": "444"}]},{"id": "6","dataType": "200","name": "质检","x": 900,"y": 200,"anchorPoints": [[0.5,0],[0.5,0.5]],"conf": [{"label": "质量检测","value": "666"}]},{"id": "5","dataType": "300","name": "不合格入库单","x": -300,"y": 0,"conf": [{"label": "返回入库员","value": "555"}]},{"id": "7","dataType": "100","name": "保管员","x": 900,"y": 400,"conf": [{"label": "核对产品","value": "777"}]},{"id": "8","dataType": "200","name": "登记入库","x": 600,"y": 400,"conf": [{"label": "登记入库产品","value": "888"}]},{"id": "9","dataType": "300","name": "库存账目系统","x": 300,"y": 400,"conf": [{"label": "库存汇总","value": "999"}]},{"id": "10","dataType": "100","name": "统计员","x": -300,"y": 400,"conf": [{"label": "统计出入库存","value": "101010"}]},{"id": "11","dataType": "200","name": "日数据报表","x": 0,"y": 400,"conf": [{"label": "系统报表","value": "111111"}]},{"id": "12","dataType": "200","name": "统计月报表","x": 300,"y": 600,"conf": [{"label": "系统生成","value": "121212"}]},{"id": "13","dataType": "100","name": "主管部门","x": 300,"y": 800,"conf": [{"label": "汇总分析上报","value": "131313"}]}],"edges": [{"source": "1","target": "2"},{"source": "5","target": "1"},{"source": "2","target": "3"},{"source": "3","target": "4"},{"source": "4","target": "6"},{"source": "6","target": "5"},{"source": "6","target": "7"},{"source": "7","target": "8"},{"source": "8","target": "9"},{"source": "10","target": "11"},{"source": "11","target": "9"},{"source": "13","target": "12"},{"source": "12","target": "9"}]
}

vue antvG6产品流程图相关推荐

vue antvG6 绘制组织架构图
vue antvG6产品流程图效果展示准备工作 demo地址:[vue-antvg6地址](https://gitee.com/shuaizi010/vue-antvg6.git) 详细介绍 1 ...
vision画流程图的软件_产品流程图的定义，作用和画法
流程图和产品文档以及原型图一样,都是日常产品工作中经常用来表达业务逻辑和产品逻辑的载体,这一小节主要从三个方面介绍流程图的相关知识,分别是:1.基本定义(what):流程图是什么:2.为什么要画(wh ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
教你使用visio 2013绘制产品流程图
http://baijiahao.baidu.com/s?id=1582938032162779622&wfr=spider&for=pc 1. 打开wisio2013后,将左侧形状区 ...
vue antvG6 多功能tree图树图树结构
vue antvG6 多功能tree图树图树结构效果展示代码环境 tree图页代码效果展示 antvg6 树结构效果图 antvg6 tree图搜索节点 antvg6 tree图显示时间,状态 ...
基于vue的简单流程图开发
严重拖延症,一方面这项目模块纯属个人娱乐.另一方面,流程图这块涉及的东西还是蛮多的,这次也只是介绍一些简单的部分.拖了这么久,现在终于要开始硬着头皮写一篇基于vue+svg的流程图"伪教程& ...
vue 源码详解（零）：Vue 源码流程图
vue 源码详解(零):Vue 源码流程图最近在研究 Vue 的源码, 整理博客, 结果想到的.看到的内容实在是太多了, 不知道从何写起, 故整理了一个大致的流程图,根据这个顺序进行一一整理. 为了 ...
B端产品流程图一网打尽
‍ ‍ 前言:流程图是产品经理必不可少的技能之一,但流程图你仅限于,只会画基本框图和跨职能流程图吗?本文就来介绍下与产品经理相关的各种各样的流程图表现形式吧! 目录: (1)流程图分类 (2)行为型的 ...
Vue源码流程图(函数名与源码对应)
这里写目录标题概览 1. 变化侦查 1.1 Observer流程图 2. vdom虚拟DOM 2.1 创建节点createElm 2.2 更新节点patchVnode 2.3 更新子节点 updat ...
axure流程图模式_Axure基础教程：产品流程图的制作方法详解
一个产品设计之初,必先从流程图做起,流程图可以用来表达产品各式各样的流程,今天我们就来聊聊Axure里面流程图的做法流程图组件在元件区面板上点击下拉选择流程图,既可看到流程图中需要用的的各种组件的 ...

vue antvG6产品流程图

vue antvG6产品流程图

antvG6 流程图效果展示

准备工作

demo地址：vue-antvg6地址

1 安装vue-admin-template

2进入目录安装所需包

3 安装必备库，antv/g6，insert-css

4新建页面配置路由

5流程图页面代码

参考地址

6数据json代码

vue antvG6产品流程图相关推荐

最新文章

热门文章

vue antvG6产品流程图

vue antvG6产品流程图

antvG6 流程图效果展示

准备工作

demo地址：vue-antvg6地址

1 安装vue-admin-template

2进入目录 安装所需包

3 安装必备库，antv/g6，insert-css

4新建页面配置路由

5流程图页面代码

参考地址

6数据json代码

vue antvG6产品流程图相关推荐

最新文章

热门文章

2进入目录安装所需包