SankeyChart

echarts 桑基图案例 https://echarts.apache.org/examples/zh/editor.html?c=sankey-levels

import React, { useEffect, useState } from 'react';
import { array, bool, number } from 'prop-types';
import { TooltipComponent } from 'echarts/components';
import { SankeyChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import Echarts, { chartHeight, sanKeyColor } from '@/components/Echarts';
import { nodes, calls } from './nodes.json';
const sankeyColor = [
  '#3fe1da', '#6be6c1', '#3fcfdc', '#626c91', '#3fbcde', 
    '#a0a7e6', '#3fa9e1', '#96dee8', '#bf99f8'
];
Chart.propTypes = {
  dataSource: array,
  height: number,
  loading: bool,
};
Chart.defaultProps = {
  dataSource: [],
  height: chartHeight,
  loading: false,
};
function Chart({ dataSource, height, loading }) {
  const [options, setOptions] = useState({});
  useEffect(update, [loading]);
  function update() {
    const OPTIONS = getOptions({ nodes, calls });
    setOptions(OPTIONS);
  }
  function getOptions({ nodes, calls }) {
    return {
      tooltip: {
        trigger: 'item',
      },
      series: {
        type: 'sankey',
        left: 40,
        top: 20,
        right: 300,
        bottom: 40,
        emphasis: { focus: 'adjacency' },
        data: nodes,
        links: calls,
        label: {
          color: '#fff',
          formatter: (param) => param.data.name,
        },
        color: sankeyColor,
        itemStyle: {
          borderWidth: 0,
        },
        lineStyle: {
          color: 'source',
          opacity: 0.12,
        },
        tooltip: {
          position: 'bottom',
          formatter: (param) => {
            if (param.dataType === 'edge') {
              return `${param.data.serviceName} -> ${param.data.destServiceName}`;
            }
            return param.data.serviceName;
          },
        },
      },
    };
  }
  const attrs = {
    options,
    height,
    loading,
    components: [
      TooltipComponent,
      SankeyChart,
      UniversalTransition,
    ],
    // renderType: 'svg'
  };
  return (
    <Echarts {...attrs} />
  );
}
export default Chart;

桑基图数据

数据来源：http://demo.skywalking.apache.org/topology

{
  "nodes": [
    {
      "id": "VXNlcg==.0_VXNlcg==",
      "name": "User",
      "serviceId": "VXNlcg==.0",
      "serviceName": "User",
      "type": "",
      "isReal": false
    },
    {
      "id": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1_R0VUOi9wcm9qZWN0Qi97dmFsdWV9",
      "name": "GET:/projectB/{value}",
      "serviceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1",
      "serviceName": "business-zone::projectB",
      "type": "",
      "isReal": true
    },
    {
      "id": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1_R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "name": "GET:/projectA/{name}",
      "serviceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1",
      "serviceName": "business-zone::projectA",
      "type": "",
      "isReal": true
    },
    {
      "id": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1_R0VUOi9wcm9qZWN0Qy97dmFsdWV9",
      "name": "GET:/projectC/{value}",
      "serviceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1",
      "serviceName": "business-zone::projectC",
      "type": "",
      "isReal": true
    },
    {
      "id": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMQ==.1_L3Byb2plY3RBL3Rlc3Q=",
      "name": "/projectA/test",
      "serviceId": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMQ==.1",
      "serviceName": "system::load balancer1",
      "type": "",
      "isReal": true
    },
    {
      "id": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMg==.1_L3Byb2plY3RBL3Rlc3Q=",
      "name": "/projectA/test",
      "serviceId": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMg==.1",
      "serviceName": "system::load balancer2",
      "type": "",
      "isReal": true
    }
  ],
  "calls": [
    {
      "id": "VXNlcg==.0-VXNlcg==-YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1-R0VUOi9wcm9qZWN0Qi97dmFsdWV9",
      "source": "VXNlcg==.0_VXNlcg==",
      "target": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1_R0VUOi9wcm9qZWN0Qi97dmFsdWV9",
      "detectPoints": [
        "SERVER"
      ],
      "serviceName": "User",
      "endpointName": "User",
      "serviceId": "VXNlcg==.0",
      "endpointId": "VXNlcg==.0_VXNlcg==",
      "type": "",
      "destServiceName": "business-zone::projectB",
      "destServiceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1",
      "destEndpointName": "GET:/projectB/{value}",
      "destEndpointId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1_R0VUOi9wcm9qZWN0Qi97dmFsdWV9",
      "value": 0.01
    },
    {
      "id": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1-R0VUOi9wcm9qZWN0QS97bmFtZX0=-YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1-R0VUOi9wcm9qZWN0Qi97dmFsdWV9",
      "source": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1_R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "target": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1_R0VUOi9wcm9qZWN0Qi97dmFsdWV9",
      "detectPoints": [
        "SERVER"
      ],
      "destServiceName": "business-zone::projectB",
      "destServiceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1",
      "destEndpointName": "GET:/projectB/{value}",
      "destEndpointId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEI=.1_R0VUOi9wcm9qZWN0Qi97dmFsdWV9",
      "serviceName": "business-zone::projectA",
      "endpointName": "GET:/projectA/{name}",
      "serviceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1",
      "endpointId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1_R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "type": "",
      "value": 36
    },
    {
      "id": "VXNlcg==.0-VXNlcg==-YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1-R0VUOi9wcm9qZWN0Qy97dmFsdWV9",
      "source": "VXNlcg==.0_VXNlcg==",
      "target": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1_R0VUOi9wcm9qZWN0Qy97dmFsdWV9",
      "detectPoints": [
        "SERVER"
      ],
      "serviceName": "User",
      "endpointName": "User",
      "serviceId": "VXNlcg==.0",
      "endpointId": "VXNlcg==.0_VXNlcg==",
      "type": "",
      "destServiceName": "business-zone::projectC",
      "destServiceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1",
      "destEndpointName": "GET:/projectC/{value}",
      "destEndpointId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1_R0VUOi9wcm9qZWN0Qy97dmFsdWV9",
      "value": 0.01
    },
    {
      "id": "VXNlcg==.0-VXNlcg==-c3lzdGVtOjpsb2FkIGJhbGFuY2VyMQ==.1-L3Byb2plY3RBL3Rlc3Q=",
      "source": "VXNlcg==.0_VXNlcg==",
      "target": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMQ==.1_L3Byb2plY3RBL3Rlc3Q=",
      "detectPoints": [
        "SERVER"
      ],
      "serviceName": "User",
      "endpointName": "User",
      "serviceId": "VXNlcg==.0",
      "endpointId": "VXNlcg==.0_VXNlcg==",
      "type": "",
      "destServiceName": "system::load balancer1",
      "destServiceId": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMQ==.1",
      "destEndpointName": "/projectA/test",
      "destEndpointId": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMQ==.1_L3Byb2plY3RBL3Rlc3Q=",
      "value": 0.01
    },
    {
      "id": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1-R0VUOi9wcm9qZWN0QS97bmFtZX0=-YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1-R0VUOi9wcm9qZWN0Qy97dmFsdWV9",
      "source": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1_R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "target": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1_R0VUOi9wcm9qZWN0Qy97dmFsdWV9",
      "detectPoints": [
        "SERVER"
      ],
      "destServiceName": "business-zone::projectC",
      "destServiceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1",
      "destEndpointName": "GET:/projectC/{value}",
      "destEndpointId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEM=.1_R0VUOi9wcm9qZWN0Qy97dmFsdWV9",
      "serviceName": "business-zone::projectA",
      "endpointName": "GET:/projectA/{name}",
      "serviceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1",
      "endpointId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1_R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "type": "",
      "value": 4
    },
    {
      "id": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMg==.1-L3Byb2plY3RBL3Rlc3Q=-YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1-R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "source": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMg==.1_L3Byb2plY3RBL3Rlc3Q=",
      "target": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1_R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "detectPoints": [
        "SERVER"
      ],
      "destServiceName": "business-zone::projectA",
      "destServiceId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1",
      "destEndpointName": "GET:/projectA/{name}",
      "destEndpointId": "YnVzaW5lc3Mtem9uZTo6cHJvamVjdEE=.1_R0VUOi9wcm9qZWN0QS97bmFtZX0=",
      "serviceName": "system::load balancer2",
      "endpointName": "/projectA/test",
      "serviceId": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMg==.1",
      "endpointId": "c3lzdGVtOjpsb2FkIGJhbGFuY2VyMg==.1_L3Byb2plY3RBL3Rlc3Q=",
      "type": "",
      "value": 72
    }
  ]
}