桑基图2

    let datalist = [
                {
            name: "公共平台"
        },
        {
            name: "系统0000"
        },
        {
            name: "系统0011"
        },
        {
            name: "系统0022"
        },
        {
            name: "系统0033"
        },
        {
            name: "系统0044"
        },
        {
            name: "系统0055"
        },{
            name: "系统11"
        },
        {
            name: "系统22"
        },
        {
            name: "系统33"
        },
        {
            name: "系统44"
        },
        {
            name: "系统55"
        },
        {
            name: "系统66"
        },
        {
            name: "系统77"
        },
        {
            name: "系统88"
        },
        {
            name: "系统99"
        }
    ];
    let linksData = [
        {
            source: "公共平台",
            target: "系统0000",
            value: 1044305
        },
        {
            source: "公共平台",
            target: "系统0011",
            value: 651527
        },
        {
            source: "公共平台",
            target: "系统0022",
            value: 651527
        },
        {
            source: "公共平台",
            target: "系统0033",
            value: 486710
        },
        {
            source: "公共平台",
            target: "系统0044",
            value: 212670
        },
        {
            source: "公共平台",
            target: "系统0055",
            value: 210400
        },{
            source: "系统0011",
            target: "系统11",
            value: 645246
        },
        {
            source: "系统0022",
            target: "系统22",
            value: 513275
        },
        {
            source: "系统0011",
            target: "系统33",
            value: 282986
        },
        {
            source: "系统0011",
            target: "系统44",
            value: 118655
        },
        {
            source: "系统0022",
            target: "系统55",
            value: 105989
        },
        {
            source: "系统0022",
            target: "系统66",
            value: 95100
        },
        {
            source: "系统0033",
            target: "系统77",
            value: 87796
        },
        {
            source: "系统0044",
            target: "系统88",
            value: 47658
        },
                {
            source: "系统0055",
            target: "系统99",
            value: 243660
        },

        
    ];
    let Color = [
        "#61FEFF",
        "#937FE6",
        "#2B56D3",
        "#87E7AA",
        "#937FE6",
        "#FF9B97",
        "#8f23f5",
        "#0576ea",
        "#2cb8cf",
        "#8A7EE0",
        "#2cb8cf",
        "#4e70f0",
        "#1fa3de",
        "#bbc951",
        "#FFC14B",
        "#b785a6",

    ];  let Color1 = [
        "#04E0F3",
        "#682EFC",
        "#35A7FE",
        "#0DC09F",
        "#682EFC",
        "#ED6663",
        "#8f23f5",
        "#0576ea",
        "#2cb8cf",
        "#8A7EE0",
        "#2cb8cf",
        "#4e70f0",
        "#1fa3de",
        "#bbc951",
        "#FFC14B",
        "#b785a6",

    ];
    let sourceLabel = [
        "right",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left"
    ];
    let itemStyleColor = [];
    let labelSource = [];
    for (let i = 0; i < datalist.length; i++) {
        datalist[i].label = {
            normal: {
                position: sourceLabel[i]
            }
        };
        labelSource.push(sourceLabel[i]);
    }
    for (let d = 0; d < datalist.length; d++) {
        datalist[d].itemStyle = {
            normal: {
                // color: Color[d]
                    color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: Color[d], // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: Color1[d], // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
            }
        };
        itemStyleColor.push(datalist[d]);
    }
    option = {
        backgroundColor: "#031d7a",
        tooltip: {
            trigger: "item",
            triggerOn: "mousemove",
            formatter: function(params) {
                if (params.name == "公共平台") {
                    return " 公共平台 "
                } else {
                    let value = params.data.value;
                    if (!value && value !== 0) return 0;
                    let str = value.toString();
                    let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                    if (params.data.source == "公共平台") {
                        return params.data.target + " : " + str.replace(reg, "$1,");
                    } else {
                        return params.data.source + " : " + str.replace(reg, "$1,");
                    }
                }
            }
        },
        series: [{
            type: "sankey",
            layout: "none",
            top: "4%",
            bottom: "12%",
            left: "20",
            right: "20",
            nodeGap: 15,
            nodeWidth: 25,
            focusNodeAdjacency: "allEdges",
            data: itemStyleColor,
            links: linksData,
            label: {
                normal: {
                    color: "#fff",
                    fontSize: 14,
                    formatter: function(params) {
                        if (params.data.name == '公共平台') {
                            let strs = params.data.name.split(''); //字符串数组
                            let str = ''
                            for (let i = 0, s; s = strs[i++];) { //遍历字符串数组
                                str += s;
                                if (!(i % 1)) str += '\n'; //按需要求余
                            }
                            return "{white|" + str + "}"
                        } else {
                            return params.data.name
                        }
                    },
                    rich: {
                        white: {
                            fontSize: 16,
                            lineHeight: 30,
                            padding: [0, 0, 0, -26]
                        }
                    }
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0.4,
                    color: "source",
                    curveness: 0.5
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: "transparent"
                }
            }
        }]
    };

 

posted @ 2022-01-20 16:37  无你旅行  阅读(21)  评论(0编辑  收藏  举报