//部门桑基图
import ReactEcharts from 'echarts-for-react';
const DepartmentSankey: React.FC<{ style?: React.CSSProperties }> = (props) => {
  let mydata = [
    {
      name: '市级城运',
      depth: 0,
    },
    {
      name: '市级部门',
      depth: 1,
    },
    {
      name: '区市县部门',
      depth: 1,
    },
    {
      name: '市人民政府',
      depth: 2,
    },
    {
      name: '成都市政协',
      depth: 2,
    },
    {
      name: '成都市政协1XXX',
      depth: 3,
    },
    {
      name: '成都市政协2XXX',
      depth: 2,
    },
  ];
  let mylinks = [
    {
      source: '市级城运',
      target: '市级部门',
      value: 42,
     
    },
    {
      source: '市级城运',
      target: '区市县部门',
      value: 22,
    
    },
    {
      source: '市级部门',
      target: '成都市政协',
      value: 32,
     
    },
    {
      source: '市级部门',
      target: '市人民政府',
      value: 10,
     
    },
    {
      source: '市级部门',
      target: '成都市政协2XXX',
      value: 4,
     
    },
    {
      source: '成都市政协',
      target: '成都市政协1XXX',
      value: 28,
     
    },
  
  ];
  const getOption = () => {
    return {
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
      },
      series: {
        type: 'sankey',
        draggable: false, //控制节点拖拽的交
        lineStyle: {
          opacity: 0.3,
          color: 'gradient',
          curveness: 0.4, //桑基图边的曲度
        },
        nodeAlign: 'justify',
        nodeGap: 100,
        nodeWidth: 45, //桑基图中每个矩形节点的宽度。
        layoutIterations: 1,
        emphasis: {
          focus: 'adjacency',
        },
        // itemStyle:{
        //   borderColor:'#5470c6',
        //   borderWidth:6
        // },
       data: mydata,
        links: mylinks,
        edgeLabel: {
          show: false,
        },
        label: {
          show: true,
          position: 'right',
          color: '#3D4566',
          verticalAlign: '',
        },
        levels: [
          {
            //桑基图每一层的设置
            depth: 0,

            itemStyle: {
              color: '#FFB1AA',
            },
          },
          {
            depth: 1,
            itemStyle: {
              color: '#ACD8FF',
            },
          },
          {
            depth: 2,
            itemStyle: {
              color: '#BCE8B1',
            },
          },
          {
            depth: 3,
            itemStyle: {
              color: '#E7C9F0',
            },
          },
          {
            depth: 4,
            itemStyle: {
              color: '#2ED8B6',
            },
          },
        ],
      },
    };
  };
  return <ReactEcharts option={getOption()} style={props.style} />;
};
export default DepartmentSankey;
