Sankey Diagram Echarts [1132149908]![image.png](https://p1-j

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sankey Diagram</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
</head>

<body>
    <div id="sankeyContainer" style="width: 1200px; height: 800px;"></div>

</body>

</html>
<script>
    var myChart = echarts.init(document.getElementById('sankeyContainer'));
    var option = {
        series: {
            type: 'sankey',
            data: [
                { name: 'Skin Care' },
                { name: 'Makeup' },
                { name: 'Fragrance' },
                { name: 'Hair Care' },
                { name: 'Revenue' },
                { name: 'Gross Profit' },
                { name: 'COGS' },
                { name: 'Operating Income' },
                { name: 'Total Operating Expense' },
                { name: 'SG&A' },
                { name: 'Pretax Income' },
                { name: 'Tax' },
                { name: 'Net Income' }
            ],
            links: [
                { source: 'Skin Care', target: 'Revenue', value: 9.9 },
                { source: 'Makeup', target: 'Revenue', value: 4.7 },
                { source: 'Fragrance', target: 'Revenue', value: 2.5 },
                { source: 'Hair Care', target: 'Revenue', value: 0.631 },
                { source: 'Revenue', target: 'Gross Profit', value: 13.4 },
                { source: 'Revenue', target: 'COGS', value: 4.3 },
                { source: 'Gross Profit', target: 'Operating Income', value: 3.5 },
                { source: 'Gross Profit', target: 'Total Operating Expense', value: 9.9 },
                { source: 'Total Operating Expense', target: 'SG&A', value: 9.9 },
                { source: 'Operating Income', target: 'Pretax Income', value: 3 },
                { source: 'Operating Income', target: 'Tax', value: 0.628 },
                { source: 'Pretax Income', target: 'Net Income', value: 2.4 }
            ],
            label: {
                show: true,
                position: 'right',
                fontSize: 14,
                fontWeight: 'bold',
                color: '#000',
                formatter: function (params) {
                    return params.data.name + ' (' + params.value + ')';
                }
            },
            nodeGap: 8,
            nodeWidth: 20,
            lineStyle: {
                color: 'blue', // source,target,gradient
                // curveness: 1
            },
            itemStyle:{
                color: 'blue'
            },
            emphasis: {
                // focus: 'adjacency'
            },
        }
    };

    myChart.setOption(option);
</script>