需要根据分类设置depth
如果同一类没有连接则摆放在一列， 如果互相连接了就摆在同类的后面，则为相邻。
1.主要设置桑基图depth参数
数据
let data= [ { "name": "ZF1_3AAB_等我去-复制", "target_id": "6763bd2e98e0f9f2e8e43aab", "unique_id": "6763bd2e98e0f9f2e8e43aac", "template_name": "服装2025", "top_hscode_id": "673d9f2f61e02cac5b06f2c5", "clickable": true, "database": { "id": "6763bd2e98e0f9f2e8e43aac", "database_id": "6763bd2e98e0f9f2e8e43aab", "name": "等我去-复制", "pid": "AUXN202408280003ZF1FZ4001", "production_line": { "id": "6760d525474d9e036bd9eeae", "plid": "AUXN202408280003ZF1FZ4001", "database_template": { "id": "6784c347d2281d4c2fc7f4c0", "name": "服装2025", "name_en": "fuzhuang2025", "hscode": { "id": "673ea5e7f34a4a6b1936aa24", "title": "6109100010", "description": "棉制针织或钩编T恤衫、汗衫等， 内衣式,包括其他背心", "code": "ZF1", "parent_id_list": [ "673d9f2f61e02cac5b06f2c5", "673ea52431af5db927e5e9eb", "673ea5a6b4e66f17a3866c75", "673ea5beb4e66f17a3866d48" ], "title_en": "6109100010", "description_en": "棉制针织或钩编T恤衫、汗衫等， 内衣式,包括其他背心" }, "status": 1, "destination_market": { "id": "673ea52431af5db927e5e9eb", "title": "CN-中国", "description": "中国市场", "code": "ZF1", "parent_id_list": [ "673d9f2f61e02cac5b06f2c5" ], "title_en": "CN-中国", "description_en": "中国市场" }, "role_key": "R20250113073951973066" }, "place_of_origin": { "id": "66ce8b63bc5350d3ba50dcc9", "create_time": "2024-08-28T02:28:51.626000Z", "update_time": "2024-08-28T02:28:51.626000Z", "delete_time": null, "user_id": "66ce8b63bc5350d3ba50dcc8", "name": "澳大利亚", "country": "AU", "province": "悉尼", "city": "悉尼", "address1": "University of Sydney, Camperdown, NSW 2006, Australia", "address2": "", "address3": "", "postcode": "10003", "full_address": "澳大利亚悉尼悉尼University of Sydney, Camperdown, NSW 2006, Australia", "place_of_origin_number": "01", "province_code": "XN" } }, "value": 0 } }, { "name": "ZW1_9D17_杂物131", "target_id": "67502084ff1ce78dde399d17", "unique_id": "67502085ff1ce78dde399d18", "template_name": "织物2025", "top_hscode_id": "673d9e0e0b7acfbde4c98292", "clickable": true, "database": { "id": "67502085ff1ce78dde399d18", "database_id": "67502084ff1ce78dde399d17", "name": "杂物131", "pid": "CNNo123ZW124324420241217121", "production_line": { "id": "674fc5dd11485fb22575ed7f", "plid": "CNNo123ZW1243244", "database_template": { "id": "6784c299d2281d4c2fc7f4b9", "name": "织物2025", "name_en": "zhiwu2025", "hscode": { "id": "673e950a31af5db927e5e8ed", "title": "6001920002", "description": "卫衣布 Fleece/卫衣绒布 Sanitary flannelette， 化纤制针织或钩编起绒织物/针织或钩编的起绒织物,包括“长毛绒”织物及毛圈织物", "code": "ZW1", "parent_id_list": [ "673d9e0e0b7acfbde4c98292", "673e9494b4e66f17a3866ba2", "673e94afea383b919852b032", "673e94d1ea383b919852b100" ], "title_en": "6001920002", "description_en": "卫衣布 Fleece/卫衣绒布 Sanitary flannelette， 化纤制针织或钩编起绒织物/针织或钩编的起绒织物,包括“长毛绒”织物及毛圈织物" }, "status": 1, "destination_market": { "id": "673e9494b4e66f17a3866ba2", "title": "CN-中国", "description": "中国市场", "code": "ZW1", "parent_id_list": [ "673d9e0e0b7acfbde4c98292" ], "title_en": "CN-中国", "description_en": "中国市场" }, "role_key": "R20250113073312185102" }, "place_of_origin": { "id": "66c595b72ede63073a8cf35c", "create_time": "2024-08-21T07:22:31.381000Z", "update_time": "2024-08-21T07:22:31.381000Z", "delete_time": null, "user_id": "66c2ceed14b2c56626a97835", "name": "中国", "country": "CN", "province": "重庆市", "city": "江北区", "address1": "五里店123号", "address2": "", "address3": "", "postcode": "222222", "full_address": null, "place_of_origin_number": "01", "province_code": "" } }, "value": 0 } }, { "name": "SX2-1_BF35_纱线2", "target_id": "67502056b6129e639f54bf35", "unique_id": "67502056b6129e639f54bf36", "template_name": "纱线2025", "top_hscode_id": "673ed71cebcb238b8d2e31dd", "clickable": true, "database": { "id": "67502056b6129e639f54bf36", "database_id": "67502056b6129e639f54bf35", "name": "纱线2", "pid": "CNCQ20240828001SX2QD0202", "production_line": { "id": "674d1e864c5cc9a05b0e8153", "plid": "CNCQ20240828001SX2-1QD0202", "database_template": { "id": "6784bf3ae9f26ae84d01ec9b", "name": "纱线2025", "name_en": "shaxian2025", "hscode": { "id": "673ed7e4ce4e47790d4088f1", "title": "5205110001", "description": "棉纱线(缝纫线除外),按重量计含棉量在85%及以上,非供零售用:细度在714.29分特及以上(不超过14公支)", "code": "SX2-1", "parent_id_list": [ "673ed71cebcb238b8d2e31dd", "673ed799188cd1a2ec965a42", "673ed7b2188cd1a2ec965afa", "673ed7c4188cd1a2ec965bb3" ], "title_en": "5205110001", "description_en": "棉纱线(缝纫线除外),按重量计含棉量在85%及以上,非供零售用:细度在714.29分特及以上(不超过14公支)" }, "status": 1, "destination_market": { "id": "673ed799188cd1a2ec965a42", "title": "CN-中国", "description": "中国市场", "code": "SX2-1", "parent_id_list": [ "673ed71cebcb238b8d2e31dd" ], "title_en": "CN-中国", "description_en": "中国市场" }, "role_key": "R20250113072234462743" }, "place_of_origin": { "id": "6732c02917592e1c63aa4c96", "create_time": "2024-11-12T02:40:41.211000Z", "update_time": "2024-11-12T02:40:41.211000Z", "delete_time": null, "user_id": "66ce8580bfc5345dac2494bf", "name": "中国", "country": "CN", "province": "重庆市", "city": "江北区", "address1": "五里店海尔路110号附30号", "address2": "", "address3": "", "postcode": "400010", "full_address": "中国重庆市江北区五里店海尔路110号附30号", "place_of_origin_number": "03", "province_code": "CQ" } }, "value": 0 } }, { "name": "XW2_818F_423", "target_id": "674fc5b9c7de0f3b404a818f", "unique_id": "674fc5b9c7de0f3b404a8190", "template_name": "纤维2025", "top_hscode_id": "673ed5c2d42aa6290c2b7851", "clickable": true, "database": { "id": "674fc5b9c7de0f3b404a8190", "database_id": "674fc5b9c7de0f3b404a818f", "name": "423", "pid": "CNNo123XW22343242024120512432", "production_line": { "id": "674fc569210fe1c8e6be400f", "plid": "CNNo123XW2234324", "database_template": { "id": "6784bd4bd2281d4c2fc7f4ad", "name": "纤维2025", "name_en": "xianwei2025", "hscode": { "id": "673ed6d1ce4e47790d408837", "title": "5203011001", "description": "已梳的棉花-10位", "code": "XW2", "parent_id_list": [ "673ed5c2d42aa6290c2b7851", "673ed673d42aa6290c2b79e0", "673ed68cd42aa6290c2b7a99", "673ed6a2d42aa6290c2b7b51" ], "title_en": "5203011001", "description_en": "已梳的棉花-10位" }, "status": 1, "destination_market": { "id": "673ed673d42aa6290c2b79e0", "title": "CN-中国", "description": "中国市场", "code": "XW2", "parent_id_list": [ "673ed5c2d42aa6290c2b7851" ], "title_en": "CN-中国", "description_en": "中国市场" }, "role_key": "R20250113071419929680" }, "place_of_origin": { "id": "66c595b72ede63073a8cf35c", "create_time": "2024-08-21T07:22:31.381000Z", "update_time": "2024-08-21T07:22:31.381000Z", "delete_time": null, "user_id": "66c2ceed14b2c56626a97835", "name": "中国", "country": "CN", "province": "重庆市", "city": "江北区", "address1": "五里店123号", "address2": "", "address3": "", "postcode": "222222", "full_address": null, "place_of_origin_number": "01", "province_code": "" } }, "value": 0.26 } }, { "name": "ZW1_4010_织物243", "target_id": "674fc64b210fe1c8e6be4010", "unique_id": "674fc64b210fe1c8e6be4011", "template_name": "织物2025", "top_hscode_id": "673d9e0e0b7acfbde4c98292", "clickable": true, "database": { "id": "674fc64b210fe1c8e6be4011", "database_id": "674fc64b210fe1c8e6be4010", "name": "织物243", "pid": "CNNo123ZW12432442024120612234", "production_line": { "id": "674fc5dd11485fb22575ed7f", "plid": "CNNo123ZW1243244", "database_template": { "id": "6784c299d2281d4c2fc7f4b9", "name": "织物2025", "name_en": "zhiwu2025", "hscode": { "id": "673e950a31af5db927e5e8ed", "title": "6001920002", "description": "卫衣布 Fleece/卫衣绒布 Sanitary flannelette， 化纤制针织或钩编起绒织物/针织或钩编的起绒织物,包括“长毛绒”织物及毛圈织物", "code": "ZW1", "parent_id_list": [ "673d9e0e0b7acfbde4c98292", "673e9494b4e66f17a3866ba2", "673e94afea383b919852b032", "673e94d1ea383b919852b100" ], "title_en": "6001920002", "description_en": "卫衣布 Fleece/卫衣绒布 Sanitary flannelette， 化纤制针织或钩编起绒织物/针织或钩编的起绒织物,包括“长毛绒”织物及毛圈织物" }, "status": 1, "destination_market": { "id": "673e9494b4e66f17a3866ba2", "title": "CN-中国", "description": "中国市场", "code": "ZW1", "parent_id_list": [ "673d9e0e0b7acfbde4c98292" ], "title_en": "CN-中国", "description_en": "中国市场" }, "role_key": "R20250113073312185102" }, "place_of_origin": { "id": "66c595b72ede63073a8cf35c", "create_time": "2024-08-21T07:22:31.381000Z", "update_time": "2024-08-21T07:22:31.381000Z", "delete_time": null, "user_id": "66c2ceed14b2c56626a97835", "name": "中国", "country": "CN", "province": "重庆市", "city": "江北区", "address1": "五里店123号", "address2": "", "address3": "", "postcode": "222222", "full_address": null, "place_of_origin_number": "01", "province_code": "" } }, "value": 0.49 } } ] let links = [ { "source": "ZF1_3AAB_等我去-复制", "source_id": "6763bd2e98e0f9f2e8e43aab", "target": "ZW1_9D17_杂物131", "target_id": "67502084ff1ce78dde399d17", "value": 1, "tag": "child" }, { "source": "ZW1_9D17_杂物131", "source_id": "67502084ff1ce78dde399d17", "target": "SX2-1_BF35_纱线2", "target_id": "67502056b6129e639f54bf35", "value": 1, "tag": "child" }, { "source": "SX2-1_BF35_纱线2", "source_id": "67502056b6129e639f54bf35", "target": "XW2_818F_423", "target_id": "674fc5b9c7de0f3b404a818f", "value": 1, "tag": "child" }, { "source": "ZF1_3AAB_等我去-复制", "source_id": "6763bd2e98e0f9f2e8e43aab", "target": "ZW1_4010_织物243", "target_id": "674fc64b210fe1c8e6be4010", "value": 1, "tag": "child" } ]
初始的效果
其中zw属于同一分类 需要保持在相邻位置
优化代码 setDepth 处理下data数据depth层级 再给每个层级设置不同的颜色, 下面的数据是根据top_hscode_id字段判断分类的。
let colors = [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
]
const setDepth = (data, links, colors) => { // 需要根据分类设置depth层级 // 先设置服装的 let dataAll = {} let colors_data = {} let catergoryList = [...new Set(data.map(item => item.top_hscode_id))].reverse(); // 现获取所有分类 反转排序 // console.log(catergoryList); let catergoryList_data = {}; for (const key in catergoryList) { colors_data[catergoryList[key]] = colors[key] ? colors[key] : '' catergoryList_data[`key_${key}_start`] = key == 0 ? 0 : Math.max(...catergoryList_data[`key_${key - 1}_list`]) + 1; catergoryList_data[`key_${key}_list`] = []; let data1 = data.filter(item => item.top_hscode_id == catergoryList[key]) // console.log(data1); for (const item in data1) { const { name } = data1[item]; // 开始设置层级 // let arr = links.filter(item => item.target === name); let arr = links.filter(item_link => item_link.target === name && data1.filter(item1 => item1.name == item_link.source).length) let arr2 = arr.length ? data.filter(item_data => item_data.name === arr[0].source) : []; if (arr.length && arr2.length && arr2[0].top_hscode_id == catergoryList[key]) { // 一条数据 if (arr.length == 1) { dataAll[name] = dataAll[arr[0].source] + 1 || catergoryList_data[`key_${key}_start`]; } else { // 存在多条的情况 获取最大值 // console.log(arr); let maxArr = arr.map(item_data => dataAll[item_data.source] || catergoryList_data[`key_${key}_start`]) // console.log(maxArr); // console.log(name); dataAll[name] = Math.max(...maxArr) + 1 || catergoryList_data[`key_${key}_start`] } } else { dataAll[name] = catergoryList_data[`key_${key}_start`] } catergoryList_data[`key_${key}_list`].push(dataAll[name]); } } return { dataAll, colors_data } } let { dataAll, colors_data } = setDepth(data, links, colors) data.map(item => { // 设置depath item.depth = dataAll[item.name] // 根据大类设置颜色 if (colors_data[item.top_hscode_id]) { item.itemStyle = { color: colors_data[item.top_hscode_id], } } })
优化后的效果
这一种就是同类没有连接，如果连接了就是这样
这两个属于同类 但是连接了，就在他后面，也是相邻
今ならできます。
浙公网安备 33010602011771号