关系图谱后端不给指向性字段使用children

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

这是后端给的json数据格式

{
    "id": "726a59f1413043c18cacbd3a2d6514b9",
    "name": "2dbe1f139b334a901eeb64dcabbe3a55.jpg",
    "code": "F03584600293",
    "type": "1",
    "children": [
        {
            "id": "c687e253b96f4ca0acbb1cd6d29d538e",
            "name": "rvt-{3D}",
            "code": "M27701353069",
            "type": "2",
            "children": []
        },
        {
            "id": "e3d86ad54151452a8bd11455556e7b8e",
            "name": "截屏2023-12-27 08.45.13.png",
            "code": "F03637928953",
            "type": "1",
            "children": []
        }
    ]
}

echarts需要的数据格式

option
  option = {
    tooltip: {
      trigger: 'item',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter(params: any) {
        const item = params.data
        return `
                ${categoriesData[item.type].label}名称：${item.name}
                 <br/>
                 ${categoriesData[item.type].label}编码：${item.code}
               `
      },
      backgroundColor: 'rgba(50,50,50,0.7)',
      borderColor: "rgba(50,50,50,0.7)",
      textStyle: {
        color: "#fff"
      }
    },
    legend: {
      orient: 'vertical',
      left: "left",
      bottom: '2',
    },
    series: [{
      type: 'graph',
      layout: 'force',
      symbolSize: 58,
      draggable: true,
      roam: true,
      categories: categories,
      focusNodeAdjacency: true,
      edgeSymbol: ['', 'arrow'],
      edgeLabel: {
        normal: {
          show: true,
          textStyle: {
            fontSize: 20
          },
          formatter(x: any) {
            return x.data.name;
          }
        }
      },
      label: {
        show: true
      },
      force: {
        repulsion: 2000,
        edgeLength: 120
      },
      data: chartsData.nodes,
      links: chartsData.links
    }]
  }
  option && myChart.setOption(option);
}

series 里面的link的数据

[
    {
        "lineStyle": {},
        "label": {
            "align": "center",
            "fontSize": 12
        },
        "source": "2dbe1f139b334a901eeb64dcabbe3a55.jpg",
        "target": "rvt-{3D}",
        "name": ""
    },
    {
        "lineStyle": {},
        "label": {
            "align": "center",
            "fontSize": 12
        },
        "source": "2dbe1f139b334a901eeb64dcabbe3a55.jpg",
        "target": "截屏2023-12-27 08.45.13.png",
        "name": ""
    }
]

series 里面的link的数据

[
    {
        "code": "F03584600293",
        "type": "0",
        "symbolSize": 100,
        "name": "2dbe1f139b334a901eeb64dcabbe3a55.jpg",
        "itemStyle": {
            "color": "#8570FE"
        }
    },
    {
        "code": "M27701353069",
        "type": "2",
        "symbolSize": 100,
        "name": "rvt-{3D}",
        "itemStyle": {
            "color": "#73A455"
        }
    },
    {
        "code": "F03637928953",
        "type": "1",
        "symbolSize": 100,
        "name": "截屏2023-12-27 08.45.13.png",
        "itemStyle": {
            "color": "#34A490"
        }
    }
]

递归调用方法

const changeData = (data: any) => {

  let newData: any;
  if (Object.prototype.toString.call(data) === '[object Object]') {
    newData = [data]

  } else if (Object.prototype.toString.call(data) === '[object Array]') {
    newData = data
  }
  newData.forEach((item: any) => {
    chartsData.nodes.push({
      code: item.code,
      type: item.type,
      symbolSize: 100,
      name: item.name,
      itemStyle: {}
    })
    if (item.children.length > 0) {
      changeData(item.children)
    }

    if (item.children.length > 0) {
      item.children.forEach((value: any) => {
        chartsData.links.push({
          lineStyle: {},
          label: {},
          source: item.name,
          target: value.name,
          name: ''
        })
      })
    }
  })

}