图可视化前端技术方案

木又的bug日记
352 阅读4分钟

一、背景（what&why）

在目前的数据平台项目中存在许多数据之间的复杂关系，无论是层级关系、包含关系，还是流向关系，都要求前端能够将其以图的形式进行可视化显示，便于用户能够快速理解并快速定位目标信息。例如，湾流平台中要求可视化特征的整体链路，显示各节点之间的依赖关系并支持修改，从而快速定位问题，帮助上下游负责人协作解决问题。

二、目标

  • 利用带方向的线表达数据节点之间的上下游关系
  • 右击节点显示相应菜单
  • 支持修改节点信息
  • 展开/收缩子节点
  • 创建、删除节点
  • 节点按照层级分组，并能够逐级展开

三、echarts

中文文档：echarts.apache.org/zh/index.ht…

1.现有的能力

  • 提供“tree”类型的图表，通过传入数据绘制初始树形结构，并支持点击节点展开/收缩
  • 支持更新时的动画效果
  • 支持设置节点、连线的部分样式
  • 支持鼠标事件

2.需要二次开发的能力

  • 自行开发菜单dom元素，监听echarts实例中的鼠标事件，能够获取点击位置坐标和点击的元素信息
  • 新增、删除节点都是数据驱动，需要修改原始数据，无直接可用的api
  • initialTreeDepth属性设置初始展开的深度，设置数据源中的collapsed属性来控制节点的展开

3.无法实现的能力

  • 给连接线加箭头
  • 更改节点的形状，设置复杂样式
  • 节点分组

4.ui效果

代码块

    myChart.showLoading();
    $.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
    myChart.hideLoading(); 
    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });
    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series:[
            {
                type: 'tree',
                data: [data],
                top: '1%',
                left: '15%',
                bottom: '1%',
                right: '7%',
                symbolSize: 7,
                orient: 'RL',
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                },
                leaves: {
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                    }
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});

image.png

5.特点总结

优点：

  • 能够满足较为简单的树图场景
  • 使用方式简单易上手，文档可读性好
  • 数据源统一驱动视图变化
  • 渲染方式多样（canvas、svg、vml）

缺点：

  • 无法复杂定制化
  • api不够灵活

四、jsplumb

英文文档：docs.jsplumbtoolkit.com/community/c…

中文文档：wdd.js.org/jsplumb-chi…

1.现有的能力

  • 自定义dom作为节点
  • 连线自定义样式
  • 支持修改锚点样式
  • 响应内置事件
  • 删除节点：jsPlumb.remove('item_left')
  • 删除连线：jsPlumb.detach(conn)

2.需要二次开发的能力

  • 图形整体结构需要自己画
  • 动画需要自行添加
  • 展开、收缩节点
  • 可以添加菜单
  • 可以添加节点分组

3.无法实现的能力

不详

4.ui效果

image.png

代码块

    jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)

5.特点总结

优点：

  • 可以最大限度的实现定制化

缺点：

  • 文档不够完备，开发成本大
  • 使用svg绘图，面对大量的数据时性能表现较差

五、vue2-org-tree

英文文档：developer.aliyun.com/mirror/npm/…

1.现有的能力

  • 设置树的方向
  • 展开/折叠子节点
  • 节点样式定制化
  • 监听和响应click、mouseover、mouseout事件

2.需要二次开发的能力

  • 更改连线样式
  • 开发菜单dom元素
  • 新增、删除节点都是数据驱动，需要修改原始数据，无直接可用的api
  • 节点分组

3.无法实现的能力

不详

4.ui效果

image.png

5.特点总结

优点：

  • ui风格统一（基于iview），简洁友好
  • 组件封闭性良好，易于上手

缺点：

  • 现有能力简单，需要付出较多成本进行二次开发
  • 定制化空间较小
  • 文档中demo较少

六、gojs

英文文档：gojs.net/latest/inde…

相关文章：www.cnblogs.com/wangpenghui…

1.现有的能力

  • 自定义节点
  • 节点展开/折叠
  • 自定义连线
  • 自定义上下文菜单
  • 丰富的内置事件

2.需要二次开发的能力

  • 去除水印

3.无法实现的能力

不详

4.ui效果

​

5.特点总结

优点：

  • 有较多demo可以参考
  • 文档详细，功能强大
  • 编程式开发，配置、算法都可以重写

缺点：

需要手动去除水印

七、antv g6

中文文档：g6.antv.vision/zh/docs/man…

1.现有的能力

  • 节点样式自定义
  • 连线样式自定义
  • 节点展开/折叠
  • 删除节点及其子节点
  • 右键打开上下文菜单
  • 动画效果

2.需要二次开发的能力

  • 节点分组combo
  • 节点逐级展开

3.无法实现的能力

不详

4.ui效果

image.png

5.特点总结

优点：

  • 文档友好，易于学习
  • 示例丰富，节省开发时间
  • api丰富，便于动态修改配置
  • 支持大规模数据的交互，性能表现良好

缺点：

  • 基于canvas绘图，不能随意在画布中添加dom元素

八、特点对比汇总

易学性二次开发成本配置灵活性
echarts强一般弱
jsplumb强较大强
vue2-org-tree一般较大弱
gojs较强大强
antv g6强小一般

九、结论及建议

针对本次的需求，最终选择antv g6，原因是能够基本覆盖需求点，节约开发时间；

如果想要实现较为复杂的交互，建议使用jsplumb、gojs等此类能够支持更灵活地定制化需求的可视化引擎。

avatar
文章
阅读
粉丝