vue项目树状图的实现

最新推荐文章于 2024-07-11 11:24:37 发布

花程序媛

最新推荐文章于 2024-07-11 11:24:37 发布

阅读量1.1w

点赞数 4

分类专栏： vue

本文链接：https://blog.csdn.net/shizhihua11/article/details/109167873

版权

本文介绍了在一个Vue项目中如何利用G6图可视化引擎实现树状图的背景、相关技术及详细集成步骤。在项目需求下，选择G6因其直观美观的树状图示例。集成过程中，封装了树状图渲染的公共方法，处理数据格式，并在合适时机调用，同时注意数据切换时的容器清理，以避免多个树状图的并存。

摘要由CSDN通过智能技术生成

1.实现背景

项目需要直观的展示元素之间的关系，需要实现一个树状图

数据可视化可以用Echarts HighCharts,但是相关树状图的示例不够直观，且不美观

几种工具之间比较，选择了蚂蚁金服的G6来实现（在开发期间有树状图的示例，之后再看发现这个例子没有了）

2.相关技术介绍

G6图可视化引擎（蚂蚁数据可视化 G6）

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

3.项目集成

3.1树状图渲染公共方法

因为页面有多处用到了树状图的逻辑，所以将方法封装成了公共的方法

文件路径 /src/utils/treeNode.js

3.1.2handleTree 处理渲染数据

主要用于将后端返回的数据处理为可以成功渲染树状图的数据格式

具体逻辑解释见代码中注释

export function handleTree(data,currentComponent){
  // 判断数据类型 根节点只有一个，不是数组
  if(Array.isArray(data)){
    data.forEach(item => {
      // data是后端返回数据 处理为有 id label style键值的对象,主要根据这几个值渲染树状图