echarts 桑基图

在开发桑基图的时候,想要实现如下效果,有什么好方式?

这是基础配置:


option = {
    tooltip: {
        trigger: 'item',
        formatter: "{b} :{c}人"

    },
    series: {
        type: 'sankey',
        layout: 'none',
        nodeGap: 20,
        data: [
          {name: '测试企业'},
          {name: '测试'},
          {name: '高薪集团'},
          {name: 'A公司'},
          {name: 'A公司下的办公区'},
          {name: 'A公司下的办公1区'},
          {name: 'B公司'},
          {name: 'B公司下工厂1区'},
          {name: 'C公司'},
          {name: 'C1公司'},
          {name: 'C11公司'},
        ],
        links: [
                { "source": "测试企业", "target": "测试", "value": 625000 },
                { "source": "测试企业", "target": "高薪集团", "value": 407600 },
                { "source": "高薪集团", "target": "A公司", "value": 39840 },
                { "source": "A公司", "target": "A公司下的办公区", "value": 0 },
                { "source": "A公司", "target": "A公司下的办公1区", "value": 10 },
                { "source": "B公司", "target": "B公司下工厂1区", "value": 367760 },
                { "source": "高薪集团", "target": "B公司", "value": 367760 },
                { "source": "C1公司", "target": "C11公司", "value": 0 },
                { "source": "C公司", "target": "C1公司", "value": 0 },
                { "source": "高薪集团", "target": "C公司", "value": 0 }
        ],
        label: {
            normal: {
                color: "#656565",
                fontSize: 14,
            }
        },
        z: 0,
        levels: [{
            depth: 0,
            itemStyle: {
                color: '#fbb4ae'
            },
            lineStyle: {
                color: 'source',
                opacity: 0.6
            }
        }, {
            depth: 1,
            itemStyle: {
                color: '#b3cde3'
            },
            lineStyle: {
                color: 'source',
                opacity: 0.6
            }
        }],
        itemStyle: {
            borderWidth: 0,
        },
        lineStyle: {
            color: 'source',
            opacity: 0.25
        }

    }
};

当前配置运行效果:

img

变成如下效果

img