vue antvG6产品流程图

效果展示
准备工作
- demo地址：[vue-antvg6地址](https://gitee.com/shuaizi010/vue-antvg6.git)
- 详细介绍
- 1 安装vue-admin-template
- 2进入目录安装所需包
- 3 安装必备库，antv/g6，insert-css
- 4新建页面配置路由
- 5流程图页面代码
- - 参考地址

效果展示

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: '/g6tree',component: Layout,redirect: '/g6tree/index2',name: 'G6tree',meta: { title: 'G6tree', icon: 'dashboard' },children: [{path: 'index2',name: 'G6tree2',component: () => import('@/views/g6tree/index2'),meta: { title: 'G6tree2', icon: 'dashboard' }},{path: 'index',name: 'G6tree1',component: () => import('@/views/g6tree/index'),meta: { title: 'G6tree1', icon: 'dashboard' }}]},

5流程图页面代码

参考地址

antvG6 示例

###页面代码
index.vue

<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="treeDiv"></div></el-col></el-row>
</template>
<script>
import G6 from "@antv/g6";
import insertCss from "insert-css";
var graph = {};
insertCss(`.g6-component-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;}
`);
export default {name: "g6tree",data() {return {treeData: {},};},created() {//获取tree数据this.treeData = require("@/assets/treeData3.json");this.$nextTick(() => {this.treeInit();});},methods: {treeInit() {const that = this;//弹出层const tooltip = new G6.Tooltip({getContent(e) {var tooltipHtml = "";const model = e.item.getModel();tooltipHtml =`<div class="tooltip-header" >` +model.label +`</div><div class="tooltip-content" ><h3>` +model.conf[0].label +":" +model.conf[0].value +`</h3>` +`</div> `;return tooltipHtml;},itemTypes: ["node"],offsetX: 1,offsetY: 0,fixToNode: false,offset: 10,});// G6增加自定义节点信息;G6.registerNode("rNode",{drawShape: (cfg, group) => {const { style, size } = cfg;const rect = group.addShape("rect", {attrs: {...style,x: -size[0] / 2,y: -size[1] / 2,width: size[0],height: size[1],fill: "#91d5ff",},name: "rect",});return rect;},},"rect");const defaultEdgeStyle = {stroke: "#91d5ff",// 箭头// endArrow: {//   path: "M 0,0 L 12, 6 L 9,0 L 12, -6 Z",//   fill: "#91d5ff",//   d: -20,// },};G6.registerEdge("flow-line", {draw(cfg, group) {const startPoint = cfg.startPoint;const endPoint = cfg.endPoint;const { style } = cfg;const shape = group.addShape("path", {attrs: {stroke: style.stroke,endArrow: style.endArrow,path: [["M", startPoint.x, startPoint.y],["L", startPoint.x, (startPoint.y + endPoint.y) / 2],["L", endPoint.x, (startPoint.y + endPoint.y) / 2],["L", endPoint.x, endPoint.y],],},});return shape;},});const treeDiv = document.querySelector("#treeDiv");const width = treeDiv.scrollWidth;const height = treeDiv.scrollHeight || 800;graph = new G6.TreeGraph({plugins: [tooltip],container: "treeDiv",linkCenter: true,width,height,pixelRatio: 2,modes: {// 内置行为参考 https://antv-g6.gitee.io/zh/docs/manual/middle/states/defaultBehaviordefault: ["collapse-expand", "drag-canvas", "zoom-canvas", "drag-node"],},// 设置一些状态时节点变化nodeStateStyles: {mouseenter: {// 鼠标划入样式设置shadowColor: "#CCC",shadowBlur: 1,},clicked: {// 选中样式设置stroke: "#409EFF",lineWidth: 2,shadowColor: "#409EFF",shadowBlur: 1,},},// 节点类型及样式defaultNode: {size: [150, 30],type: "rNode",style: {// 节点阴影颜色和宽度shadowColor: "#CCC",shadowBlur: 10,// 阴影偏移量shadowOffsetX: 5,shadowOffsetY: 5,// 边框颜色和宽度stroke: "",lineWidth: 0,},},// 连线类型及样式defaultEdge: {type: "flow-line",style: defaultEdgeStyle,},//布局和绘图类型layout: {type: "compactBox",direction: "TB",getHeight: function getHeight() {return 16;},getWidth: function getWidth() {return 16;},getVGap: function getVGap() {return 40;},getHGap: function getHGap() {return 70;},},});graph.read(this.treeData);graph.fitView();if (typeof window !== "undefined")window.onresize = () => {this.$nextTick(() => {if (!graph || graph.get("destroyed")) return;if (!treeDiv || !treeDiv.scrollWidth || !treeDiv.scrollHeight) return;graph.changeSize(treeDiv.scrollWidth, treeDiv.scrollHeight);graph.render();graph.fitView();});};// 鼠标移入节点 node:mouseentergraph.on("node:mouseenter", (evt) => {const { item } = evt;graph.setItemState(item, "mouseenter", true);// // 获得当前鼠标操作的目标节点// const node = item;// // 获得目标节点的所有相关边// const edges = node.getEdges();// // 将所有相关边的 running 状态置为 true，此时将会触发自定义节点的 setState 函数// edges.forEach((edge) => graph.setItemState(edge, "running", true));});// 鼠标移出节点 node:mouseleavegraph.on("node:mouseleave", (evt) => {const { item } = evt;graph.setItemState(item, "mouseenter", false);// // 获得当前鼠标操作的目标节点// const node = item;// // 获得目标节点的所有相关边// const edges = node.getEdges();// // 将所有相关边的 running 状态置为 false，此时将会触发自定义节点的 setState 函数// edges.forEach((edge) => graph.setItemState(edge, "running", false));});},downloadImage() {graph.downloadFullImage(Math.random().toString(16));},},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.whr100 {height: 100%;width: 100%;position: relative;
}
</style>

json数据

{"id": "1","dataType": "100","label": "董事会","conf": [{"label": "董事会成员","value": "王大拿 王二拿 王三拿"}],"children": [{"id": "2","dataType": "200","label": "总经理","conf": [{"label": "姓名","value": "刘大根儿"}],"children": [{"id": "3","dataType": "300","label": "副总经理","conf": [{"label": "姓名","value": "大聪明"}],"children": [{"id": "7","dataType": "400","label": "市场部","conf": [{"label": "经理","value": "牛利群"}]},{"id": "8","dataType": "400","label": "业务部","conf": [{"label": "经理","value": "郑乾"}]}]},{"id": "4","dataType": "300","label": "副总经理","conf": [{"label": "姓名","value": "大明白"}],"children": [{"id": "9","dataType": "400","label": "设计部","conf": [{"label": "经理","value": "任美丽"}]},{"id": "10","dataType": "400","label": "开发部","conf": [{"label": "经理","value": "步佳班"}]},{"id": "11","dataType": "400","label": "运维部","conf": [{"label": "经理","value": "杨功头"}]}]},{"id": "5","dataType": "300","label": "副总经理","conf": [{"label": "姓名","value": "大能耐"}],"children": [{"id": "13","dataType": "400","label": "客服部","conf": [{"label": "经理","value": "高大紧"}]},{"id": "14","dataType": "400","label": "行政部","conf": [{"label": "经理","value": "蒋公章"}]},{"id": "15","dataType": "400","label": "人力资源部","conf": [{"label": "经理","value": "钊仁才"}]},{"id": "12","dataType": "400","label": "财务部","conf": [{"label": "经理","value": "程有财"}]}]},{"id": "6","dataType": "300","label": "分公司","conf": [{"label": "分公司总经理","value": "赵老四"}],"children": []}]}]
}

vue antvG6 绘制组织架构图相关推荐

对话框绘制完成消息_Word小技巧-一分钟教会你快速绘制组织架构图
又到了新的一年,各个公司也开始对自家的制度和规划开展梳理,其中有一个重要的事情那就是,公司的组织架构调整,这代表着我们又要重新开始绘制组织架构图了,你是怎么做的呢?还在一个一个的绘制图框,再输入文字, ...
PowerBI利用市场可视化组件Hierarchy Chart by Akvelon绘制组织架构图
目录背景来源补充背景来源 Power BI在市场中为用户提供了多元化的可视化组件,以使报表呈现更加丰富美观.用户也可以自己在开发平台上开发符合业务需求的新组件,今年2月Power BI更新的内容 ...
vue——实现组织架构图(vue-org-tree)——技能提升
关于组织架构图,效果图如下: 之前我是用jq写过一个组织架构图,文章链接如下:当时是用的jOrgChart jq版本的组织架构图:https://blog.csdn.net/yehaocheng520 ...
【图形设计】什么是组织架构图？如何画组织架构图
什么是组织架构图?组织架构图即用于呈现组织构架的图示,通常也可以称为组织结构图,是一种用于直观反映群体关系内组织构架的图表. 一.组织架构图的作用组织架构图作为一种反映群体内组织架构情况的图示,不仅 ...
ppt中的流程图怎么整体移动_如何快速在PPT中产生一个复杂的组织架构图？
如何快速在PPT中产生一个复杂的组织架构图? 时间:2016-06-03来源: 网络作者: 未知点击: 次 PPT制作技巧:如何快速在PPT中产生一个复杂的组织架构图? 大家都知道,在PPT当中有个非 ...
vue2--基于zm-tree-org实现公司部门组织架构图
1.安装zm-tree-org npm i zm-tree-org -S 2.引入使用 import Vue from 'vue'; import ZmTreeOrg from 'zm-tree-or ...
vue-orgchart做组织架构图
Vue-orgchart链接地址 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
excel表中怎么插入visio_快速制作组织架构图，还在用Visio就out了，Excel简单三步搞定...
工作中相信绝大多数人都见过一种图表类型,那就是组织架构图.组织架构图经常用于企业内部部门结构.人员编制分工的展示.通过组织架构图,我们能够清晰的查看到各部门人员结构.业务等情况. 如上图所示,我们需要 ...
excel流程图分叉合并_快速制作组织架构图，层次结构图，流程图等，只需学会这个功能...
Hello,大家好,今天跟大家分享下一个excel中非常实用,他就是SmartArt图形, 下面这个图形都是使用SmartArt制作的,有组织架构图,关系包含图,流程图等,是不是感觉非常的好看呢?他们 ...

vue antvG6 绘制组织架构图

vue antvG6产品流程图

效果展示

准备工作

demo地址：vue-antvg6地址

详细介绍

1 安装vue-admin-template

2进入目录安装所需包

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

4新建页面配置路由

5流程图页面代码

参考地址

vue antvG6 绘制组织架构图相关推荐

最新文章

热门文章

vue antvG6 绘制组织架构图

vue antvG6产品流程图

效果展示

准备工作

demo地址：vue-antvg6地址

详细介绍

1 安装vue-admin-template

2进入目录 安装所需包

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

4新建页面配置路由

5流程图页面代码

参考地址

vue antvG6 绘制组织架构图相关推荐

最新文章

热门文章

2进入目录安装所需包