最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还没有进行开源,所以只能退而求其次,使用了1.2.8版本.希望2.0版本的编辑器尽早开源,在交互方面1.2.8版本还是差了一些. 该组件并非开箱即食,需要根据自己的业务进行修改,右侧属性表单部分如果有时间考虑改为插槽形式,方便以后复用~ 如何将数据进行数据可视化展现? 技术栈 Vue v3.0.1 E…

通过一段时间的使用和学习,对G6有了更一步的经验,这篇博文主要从以下几个小功能着手介绍,文章最后会给出完整的demo代码. 目录 1. 树图的基本布局和使用 2. 根据返回数据的属性不同,定制不一样的节点样式 3. 节点 label 文案显示过长时,通过截断的方式,显示... 4. 当一个父节点包含children叶子节点时,label后显示children的长度,格式为:node.label(children.length) 5. 截断后的label ,通过鼠标悬浮,完全显示在 tooltip…

首先看页面效果: AntV官网下载F6文件到项目中与uViewUI插件 <template> <view class="page"> <!-- 导航栏 --> <b-nav-bar class="title"> <template slot="left"> <view @click="nativeBack" class="iconfont icon-z…

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! innerHTML 在读模式下,返回与调用元素的所有子节点(包括元素.注释和文本节点)对应的 HTML 标记: 在写模式下,innerHTML 会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点: 如果将 innerHTML 属性设为空,等于删除所有它包含的所有节点: 对 innerHTML 属性用"+="操作符重复追加一小段文本通常效率低下,因为它既要…

8.1.常用命令 启动ZK服务 bin/zkServer.sh start 查看ZK服务状态 bin/zkServer.sh status 停止ZK服务 bin/zkServer.sh stop 重启ZK服务 bin/zkServer.sh restart 连接服务器 zkCli.sh -server 127.0.0.1:2181 8.2 客户端连接 运行 zkCli.sh –server <ip>进入命令行工具 在192.168.106.82服务器上连接到192.168.106.81服务器下…

弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,width和height都设为100%(body和html的width和height也都设为100%); 在遮罩层的div.box里写弹框的div.container,位置相对于父级…

Merkle 树 图 1.5.6.1 - Merkle 树示例 默克尔树(又叫哈希树)是一种二叉树,由一个根节点.一组中间节点和一组叶节点组成.最下面的叶节点包含存储数据或其哈希值,每个中间节点是它的两个孩子节点内容的哈希值,根节点也是由它的两个子节点内容的哈希值组成. 进一步的,默克尔树可以推广到多叉树的情形. 默克尔树的特点是,底层数据的任何变动,都会传递到其父亲节点,一直到树根. 默克尔树的典型应用场景包括: 快速比较大量数据:当两个默克尔树根相同时,则意味着所代表的数据必然相同. 快速定…

Vue2中实现微信分享支付功能  近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些公众号的基本配置我就不多说了,不懂的可以看一下微信开发文档. 话不多说,咱们开始吧! 安装微信JS-SDK 首先需要通过npm安装微信的JS-SDK npm -install weixin-js-sdk --save 由于项目是基于微信公众号开发的,所有授权的时候微信会自己判断用户所用的浏览器是否为…

ivew数控件Tree自定义节点内容示例分析 demo地址:https://run.iviewui.com/plcWlM4H <template> <Tree :data="data5" :render="renderContent"></Tree> </template> <script> export default { data () { return { data5: [ { title: 'par…

安装 npm install @antv/g6 --save 引用 import G6 from '@antv/g6' 自定义节点 /** * 方式一 */ G6.registerNode('rect-jsx', (cfg) =>` <group> <rect> <rect style={{ width: 160, height: 20, fill: ${cfg.color}, cursor: 'move', stroke: ${cfg.color} }} dragga…