每日一博 | 如何基于 G6 进行双树流转绘制?
1. 背景 业务背景:CRM系统随着各业务条线对线索精细化分配的诉求逐渐增加,各个条线的流向规则会越来越复杂,各个条线甚至整个CRM的线索流转规则急需一种树形的可视化的图来表达。 技术背景:在开发之前考虑了三种方案,原生canvas、fabric以及G6,三种方案各有优劣势 原生canvas fabric G6 优点 灵活、自由、可定制化非常强 封装了canvas的api,使用简单灵活 提供了复杂树、图等api,只需要按照文档配置即可 缺点 开发复杂、耗时 对于构建大型树、图等复杂、耗时 在开发前需要认真阅读api文档,上手慢 通过上述表格对比就可以看出来,对于构建更为复杂的树、图等,G6具备明显的优势,而且又有活跃的开源社区,为后续的维护升级提供了保证。 2. 基础知识 下面是关于本次双树流转绘制的几个核心概念,简单介绍一下,如有兴趣,还是建议阅读G6官方API文档 图Graph 通过 new G6.Graph(config) 进行图的实例化。其中参数 config是 Object 类型的图的配置项,图的大部分功能可以通过该配置项进行全局配置。 如果是树图,需要使用new G6.Tr...
