基于echarts桑基图改造的数据流向

最近出了个需求，要求做一个数据流向的图表。

根据数据结构特点：数据可以通过多个节点开始流入，最终可以流向多个节点。根据这个特点，满足要求的有两个：一个是关系图，另一个是桑基图。再根据各节点的排列位置来看，桑基图是最接近的了

但是设计师觉得桑基图的样式不好看，所以要基于桑基图来调整。

一般的桑基图是这样的

在阅读echarts的桑基图的文档之后，节点的高度是自动的，宽度可以设置，但是只能统一设置，不能对节点单独设置。这样的比较麻烦了，不太好自定义了。

但是，echarts还有个label属性，我们可以通过echarts的label的富文本属性来自定义节点的样式【太妙了】 

下面直接上代码：

（这里的代码的主要终点就是对node的label的设置，已经link的lineStyle的设置，其他的根绝自己的需求调整即可）

使用的技术栈：vue3.0 + ts

function handleInitEchart(data: any[], links: any[]) {
      const nodesMap: any = {}, linksCountMap: any = {};
      const colors: any = [
        "#1C4BA0",
        "#F99F46",
        "#F4654E",
        "#5A2EF7",
        "#0086FF",
        "#FF6600",
        "#FF6666",
      ];
      const bigColor: any = [
        "#336699",
        "#FF6600",
        "#990033",
        "#FF6666",
        "#009966",
        "#CC6600",
        "#003366",
        "#CC3333",
        "#006699",
        "#FFCCCC",
      ];
      for (let i = 0; i < links.length; i++) {
        let item = links[i];
        if (!linksCountMap[item.target]) {
          linksCountMap[item.target] = [item.source];
        } else {
          linksCountMap[item.target].push(item.source);
        }
      }
      links.forEach((item: any) => {
        if (linksCountMap[item.target].includes(item.source)) {
          item.value = parseInt(
            (60 / linksCountMap[item.target].length) as any
          );
        } else {
          item.value = 10;
        }
        if (item.value > 10) {
          item.value = 10;
        }
        Object.assign(item, {
          lineStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colors[item.level - 1],
              },
              {
                offset: 1,
                color: colors[item.level],
              },
            ]),
          },
        });
      });
      for (let i = 0; i < data.length; i++) {
        data[i].count = data[i].value;
      }

      data.forEach((item: any, idx: number) => {
        if (!nodesMap[item.level]) {
          nodesMap[item.level] = [item];
        } else {
          nodesMap[item.level].push(item);
        }

        item.value = 30;
        item.name = "节点名称" + idx;
        let offsetY = 8;
        let padding = [4, 10],
          color = colors[item.level - 1];
        if (item.level == "1") {
          if (item.count > 5000000) {
            item.value = 28;
            padding = [10, 10];
            offsetY = 8;

            let colori = parseInt((Math.random() * 7) as any);
            color = bigColor[colori];
          } else {
            item.value = 16;
            padding = [4, 10];
            offsetY = 4;
          }
        } else {
          item.value = 60;
          padding = [17, 10];
          offsetY = 20;
          if (linksCountMap[item.id].length > 3) {
            offsetY = 0;
          }
        }

        Object.assign(item, {
          level: item.level,
          nodeWidth: 270,
          label: {
            offset: [0, -offsetY],
            width: 247,
            show: true,
            position: "inside",
            padding: padding,
            borderColor: color,
            borderWidth: 1,
            borderRadius: 4,
            borderType: "solid",
            backgroundColor: color,
            fontSize: item.level == "1" ? 12 : 20,
            formatter(e: any) {
              if (item.level == "1") {
                return `{a|${e.data.name}}{b|${e.data.count}}`;
              } else {
                return `{c|${e.data.name}}\n{d|${e.data.count}}`;
              }
            },
          },
        });
      });
      const option = {
        series: [
          {
            type: "sankey",
            left: 20,
            top: 20,
            right: 20,
            bottom: 20,
            data: data,
            links: links,
            nodeWidth: 270,
            draggable: false,
            focusNodeAdjacency: "allEdges",
            lineStyle: {
              color: "source",
              curveness: 0.5,
            },
            itemStyle: {
              color: "transparent",
              borderColor: "transparent",
            },
            label1: {
              position: "inside",
              fontSize: 12,
              color: "#666",
              formatter: function (params: any) {
                let { data } = params;
                return data.name;
              },
            },
            label: {
              position: "inside",
              show: true,
              color: "#fff",
              fontSize: 12,
              rich: {
                a: {
                  width: 200,
                  align: "left",
                  color: "#fff",
                },
                b: {
                  color: "#fff",
                  align: "right",
                },
                c: {
                  width: 200,
                  fontSize: 24,
                  align: "center",
                },
                d: {
                  fontSize: 24,
                  align: "center",
                },
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
        },
      };

      echartsOptions.value = option;
    }

 最终的效果图：