Echarts桑基图

关于Echarts的使用方法参考：vue2中echarts的使用_vue2中使用echarts-CSDN博客

实现效果：

代码：

var sysT = {
    "用采": '#2D9BFF',
    "营销系统": '#39BFFF',
    "ERP": '#76C2FF',
    "财务管控": '#5F57FC',
    "PMS": '#2D9BFF',
    "近源层_用采": '#92FFFF',
    "近源层_营销": '#ACFF96',
    "近源层_ERP": '#7583FF',
    "近源层_PMS": '#73C3FF',
    "近源层_财务管控": '#5477FE',
    "资产域": '#5F57F9',
    "客户域": '#7982FE',
    "财务域": '#4F78FE',
    "标准区_用采": '#2B9DFF',
    "标准区_营销系统": '#92FFFF',
    "标准区_ERP": '#38C0FF',
    "标准区_财务管控": '#74C3FF',
    "标准区_PMS": '#AAFF95',
    "分析层自建宽表": '#73C3FF'
}

var nodes = [
    {
        "name": "用采"
    },
    {
        "name": "营销系统"
    },
    {
        "name": "ERP"
    },
    {
        "name": "财务管控"
    },
    {
        "name": "PMS"
    },
    {
        "name": "近源层_用采"
    },
    {
        "name": "近源层_营销"
    },
    {
        "name": "近源层_ERP"
    },
    {
        "name": "近源层_PMS"
    },
    {
        "name": "近源层_财务管控"
    },
    {
        "name": "资产域"
    },
    {
        "name": "客户域"
    },
    {
        "name": "财务域"
    },
    {
        "name": "标准区_用采"
    },
    {
        "name": "标准区_营销系统"
    },
    {
        "name": "标准区_ERP"
    },
    {
        "name": "标准区_财务管控"
    },
    {
        "name": "标准区_PMS"
    },
    {
        "name": "分析层自建宽表"
    }
];
var links = [
    {
        "source": "用采",
        "target": "近源层_用采",
        "value": 500
    },
    {
        "source": "营销系统",
        "target": "近源层_营销",
        "value": 958
    },
    {
        "source": "ERP",
        "target": "近源层_ERP",
        "value": 1080
    },
    {
        "source": "财务管控",
        "target": "近源层_财务管控",
        "value": 2627
    },
    {
        "source": "PMS",
        "target": "近源层_PMS",
        "value": 2109
    },
    {
        "source": "近源层_用采",
        "target": "标准区_用采",
        "value": 355
    },
    {
        "source": "近源层_营销",
        "target": "标准区_营销系统",
        "value": 958
    },
    {
        "source": "近源层_ERP",
        "target": "标准区_ERP",
        "value": 1080
    },
    {
        "source": "近源层_PMS",
        "target": "标准区_PMS",
        "value": 2109
    },
    {
        "source": "近源层_财务管控",
        "target": "标准区_财务管控",
        "value": 2627
    },
    {
        "source": "近源层_用采",
        "target": "客户域",
        "value": 121
    },
    {
        "source": "近源层_营销",
        "target": "客户域",
        "value": 524
    },
    {
        "source": "近源层_ERP",
        "target": "资产域",
        "value": 12
    },
    {
        "source": "近源层_ERP",
        "target": "财务域",
        "value": 80
    },
    {
        "source": "近源层_PMS",
        "target": "资产域",
        "value": 536
    },
    {
        "source": "近源层_PMS",
        "target": "综合域",
        "value": 200
    },
    {
        "source": "近源层_财务管控",
        "target": "财务域",
        "value": 88
    },
    {
        "source": "资产域",
        "target": "UEP两级数据贯通",
        "value": 524
    },
    {
        "source": "客户域",
        "target": "UEP两级数据贯通",
        "value": 608
    },
    {
        "source": "财务域",
        "target": "UEP两级数据贯通",
        "value": 153
    },
    {
        "source": "标准区_用采",
        "target": "UEP两级数据贯通",
        "value": 420
    },
    {
        "source": "标准区_营销系统",
        "target": "UEP两级数据贯通",
        "value": 958
    },
    {
        "source": "标准区_ERP",
        "target": "UEP两级数据贯通",
        "value": 1107
    },
    {
        "source": "标准区_财务管控",
        "target": "UEP两级数据贯通",
        "value": 2628
    },
    {
        "source": "标准区_PMS",
        "target": "UEP两级数据贯通",
        "value": 2109
    },
    {
        "source": "标准区_ERP",
        "target": "智慧供应链",
        "value": 4
    },
    {
        "source": "标准区_PMS",
        "target": "PIS项目",
        "value": 2107
    },
    {
        "source": "标准区_用采",
        "target": "PIS项目",
        "value": 418
    },
    {
        "source": "标准区_营销系统",
        "target": "PIS项目",
        "value": 1252
    },
    {
        "source": "标准区_PMS",
        "target": "供电服务",
        "value": 200
    },
    {
        "source": "标准区_财务管控",
        "target": "智慧供应链",
        "value": 2621
    },
    {
        "source": "标准区_用采",
        "target": "线变关系应用",
        "value": 418
    },
    {
        "source": "近源层_ERP",
        "target": "分析层自建宽表",
        "value": 300
    },
    {
        "source": "近源层_营销",
        "target": "分析层自建宽表",
        "value": 418
    },
    {
        "source": "近源层_用采",
        "target": "分析层自建宽表",
        "value": 418
    },
    {
        "source": "近源层_财务管控",
        "target": "分析层自建宽表",
        "value": 418
    },
    {
        "source": "近源层_PMS",
        "target": "分析层自建宽表",
        "value": 418
    },
    {
        "source": "分析层自建宽表",
        "target": "供电服务",
        "value": 185
    },
    {
        "source": "分析层自建宽表",
        "target": "数据挖掘展示",
        "value": 32
    },
    {
        "source": "分析层自建宽表",
        "target": "营销综合应用",
        "value": 30
    },
    {
        "source": "分析层自建宽表",
        "target": "ERP多维精益",
        "value": 14
    },
    {
        "source": "分析层自建宽表",
        "target": "数据超市场景",
        "value": 4
    },
    {
        "source": "分析层自建宽表",
        "target": "民企清欠场景",
        "value": 1
    }
];


var dataF = [];
var colorList = [];

for (var key in sysT) {
    colorList.push({
        name: key,
        itemStyle: {
            color: sysT[key]
        }
    })
}

for (var i = 0; i < links.length; i++) {
    var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: sysT[links[i].source]
    }, {
        offset: 1,
        color: sysT[links[i].target]
    }])
    dataF.push({
        source: links[i].source,
        target: links[i].target,
        value: links[i].value,
        lineStyle: {
            color: color
        }
    })
}
option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    emphasis: { // 桑基图的高亮状态。
       focus: 'adjacency'
       // 'none' 不淡出其它图形，默认使用该配置。
       // 'self' 只聚焦（不淡出）当前高亮的数据的图形。
       // 'series' 聚焦当前高亮的数据所在的系列的所有图形。
       // 'adjacency' 聚焦关系图中的邻接点和边的图形。
       // 'trajectory' 聚焦所有连接到当前高亮的数据的节点和边。（从 v5.4.3 开始支持）
    },
    series: [{
        type: 'sankey',
        left: '0', // sankey组件离容器左侧的距离
        data: colorList,
        links: dataF,
        focusNodeAdjacency: 'allEdges',
        itemStyle: {
            // borderWidth: 1,
            borderColor: 'transparent' // 透明
        },
        lineStyle: {
            color: 'source',
            curveness: 0.5
        },
        label: {
          show: true,
          position: 'right',
          formatter: function (params) {
            // params 是节点的数据对象
            // 假设我们设置最大显示长度为5
            let name = params.data.name
            if (name.length > 16) {
              // 截断文本并添加省略号
              return name.slice(0, 16) + '...'
            }
            return name
          }
        },
        nodeWidth: 30, // 设置节点宽度
        nodeGap: 14 // 设置节点间隔
    }]
}