使用递归的方式将Json字符串数据转换为echarts树图的数据格式,并绘制树图

本文介绍了如何在Vue环境中将接收到的Json字符串数据解析成JavaScript对象数组,然后通过递归函数将其转换为适用于Echarts树图的格式。通过这个过程,最终能够成功地使用Echarts绘制出树形结构图。文中详细阐述了四个步骤,包括数据解析、递归转换、数据格式化以及树图的绘制。
摘要由CSDN通过智能技术生成

在vue中绘制自定义树图图形:
pengzhizhina

vue中根据得到的Json字符串数据

这一堆都是我从后台得到的json数据
[{“IN_MAT_NO_1”:“”,“MAT_SEQ_NO”:1.0,“OUT_MAT_NO”:“1311649715200”,“PRE_UNIT_CODE”:“S001”},{“IN_MAT_NO_1”:“1311649715200”,“MAT_SEQ_NO”:2.0,“OUT_MAT_NO”:“117773709700”,“PRE_UNIT_CODE”:“H031”},{“IN_MAT_NO_1”:“117773709700”,“MAT_SEQ_NO”:3.0,“OUT_MAT_NO”:“117773709701”,“PRE_UNIT_CODE”:“H079”},{“IN_MAT_NO_1”:“117773709701”,“MAT_SEQ_NO”:4.0,“OUT_MAT_NO”:“1103000063”,“PRE_UNIT_CODE”:“H04A”},{“IN_MAT_NO_1”:“117773709701”,“MAT_SEQ_NO”:4.0,“OUT_MAT_NO”:“1103000064”,“PRE_UNIT_CODE”:“H04A”},{“IN_MAT_NO_1”:“117773709701”,“MAT_SEQ_NO”:4.0,“OUT_MAT_NO”:“1103000061”,“PRE_UNIT_CODE”:“H04A”},{“IN_MAT_NO_1”:“117773709701”,“MAT_SEQ_NO”:4.0,“OUT_MAT_NO”:“1103000062”,“PRE_UNIT_CODE”:“H04A”},{“IN_MAT_NO_1”:“117773709701”,“MAT_SEQ_NO”:4.0,“OUT_MAT_NO”:“1103000059”,“PRE_UNIT_CODE”:“H04A”},{“IN_MAT_NO_1”:“1103000064”,“MAT_SEQ_NO”:5.0,“OUT_MAT_NO”:“1173005012”,“PRE_UNIT_CODE”:“H077”}]
其中MAT_SEQ_NO为排序号,IN_MAT_NO_1为父节点

1.将Json字符串数据解析为JavaScript对象数组。

let data = JSON.parse(jsonString);

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值