Untitled

option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: {
      type: 'sankey',
      layout: 'none',
      nodeGap: 60,
      width: '80%',
      top: '10%',
      height: '50%',
      layoutIterations: 1,
      emphasis: {
        focus: 'adjacency'
      },
      levels: [
        {
          depth: 0,
          itemStyle: {
            color: '#E3342F'
          },
          label: {
            rotate: 90,
            fontWeight: 'bolder',
            offset: [-100, 0],
            formatter: function (params) {
              const formattedValue = Number(params.value).toLocaleString('en-US');
              return `${params.name} : {textBold|${formattedValue}} {textPercent|${params.data.percent}%}`;
            }
          },
          lineStyle: {
            color: 'source',
            opacity: 0.6
          }
        },
        {
          depth: 1,
          itemStyle: {
            color: '#F6993F'
          },
          lineStyle: {
            color: 'source',
            opacity: 0.6
          }
        },
        {
          depth: 2,
          itemStyle: {
            color: '#4DC0B5'
          },
          lineStyle: {
            color: 'source',
            opacity: 0.6
          }
        },
        {
          depth: 3,
          itemStyle: {
            color: '#38C172'
          },
          lineStyle: {
            color: 'source',
            opacity: 0.6
          }
        },
        {
          depth: 4,
          itemStyle: {
            color: '#3490DC'
          },
          lineStyle: {
            color: 'source',
            opacity: 0.6
          }
        }
      ],
      lineStyle: {
        curveness: 0.5
      },
      label: {
        show: true,
        distance: 8,
        formatter: function (params) {
          const formattedValue = Number(params.value).toLocaleString('en-US');
          return `${params.name} :

{textBold|${formattedValue}} {textPercent|${params.data.percent}%}`;
        },
        fontSize: '10px',
        align: 'left',
        position: 'left',
        backgroundColor: 'rgba(255,255,255,0.6)',
        padding: 8,
        borderRadius: 8,
        rich: {
          textBold: {
            fontWeight: 700
          },
          textPercent: {
            color: '#F82C17',
            fontSize: 8,
            fontWeight: 700
          }
        }
      },
      data: [
            {
                "name": "PO-EDC-x-2024-II",
                "depth": 0,
                "percent": "100"
            },
            {
                "name": "BAST 1",
                "depth": 1,
                "percent": "30"
            },
            {
                "name": "BAST 3",
                "depth": 1,
                "percent": "1"
            },
            {
                "name": "BAST 7",
                "depth": 1,
                "percent": "16"
            },
            {
                "name": "BAST 6",
                "depth": 1,
                "percent": "1"
            },
            {
                "name": "BAST 9",
                "depth": 1,
                "percent": "1"
            },
            {
                "name": "Undelivered",
                "depth": 1,
                "percent": "51"
            },
            {
                "name": "BAST",
                "depth": 2,
                "percent": "49"
            },
            {
                "name": "Unstagged",
                "depth": 3,
                "percent": "13"
            },
            {
                "name": "Stagged",
                "depth": 3,
                "percent": "36"
            },
            {
                "name": "Broken",
                "depth": 3,
                "percent": "0"
            },
            {
                "name": "In Delivery",
                "depth": 4,
                "percent": "29.00"
            },
            {
                "name": "Ready in Warehouse",
                "depth": 4,
                "percent": "5"
            },
            {
                "name": "Delivered to SERPO",
                "depth": 4,
                "percent": "2"
            },
            {
                "name": "Distributed to MERI",
                "depth": 5,
                "percent": "0"
            },
            {
                "name": "Ready in SERPO",
                "depth": 5,
                "percent": "2"
            },
            {
                "name": "Merchant",
                "depth": 6,
                "percent": "0"
            },
            {
                "name": "Ready on MERI",
                "depth": 6,
                "percent": "0"
            }
        ],
        links: [
            {
                "source": "PO-EDC-x-2024-II",
                "target": "Undelivered",
                "value": 51
            },
            {
                "source": "PO-EDC-x-2024-II",
                "target": "BAST 1",
                "value": 30
            },
            {
                "source": "BAST 1",
                "target": "BAST",
                "value": 30
            },
            {
                "source": "PO-EDC-x-2024-II",
                "target": "BAST 3",
                "value": 1
            },
            {
                "source": "BAST 3",
                "target": "BAST",
                "value": 1
            },
            {
                "source": "PO-EDC-x-2024-II",
                "target": "BAST 7",
                "value": 16
            },
            {
                "source": "BAST 7",
                "target": "BAST",
                "value": 16
            },
            {
                "source": "PO-EDC-x-2024-II",
                "target": "BAST 6",
                "value": 1
            },
            {
                "source": "BAST 6",
                "target": "BAST",
                "value": 1
            },
            {
                "source": "PO-EDC-x-2024-II",
                "target": "BAST 9",
                "value": 1
            },
            {
                "source": "BAST 9",
                "target": "BAST",
                "value": 1
            },
            {
                "source": "BAST",
                "target": "Unstagged",
                "value": 13
            },
            {
                "source": "BAST",
                "target": "Stagged",
                "value": 36
            },
            {
                "source": "BAST",
                "target": "Broken",
                "value": 0
            },
            {
                "source": "Stagged",
                "target": "In Delivery",
                "value": 29
            },
            {
                "source": "Stagged",
                "target": "Ready in Warehouse",
                "value": 5
            },
            {
                "source": "Stagged",
                "target": "Delivered to SERPO",
                "value": 2
            },
            {
                "source": "Delivered to SERPO",
                "target": "Distributed to MERI",
                "value": 0
            },
            {
                "source": "Delivered to SERPO",
                "target": "Ready in SERPO",
                "value": 2
            },
            {
                "source": "Distributed to MERI",
                "target": "Merchant",
                "value": 0
            },
            {
                "source": "Distributed to MERI",
                "target": "Ready on MERI",
                "value": 0
            }
        ]
    }
  };