echarts流程图

data = [
  {
    name: 'A',
    value: [500, 950],
    symbol: 'rect',
    symbolSize: [90, 90],
    itemStyle: {
      color: '#FFFFFF',
      borderColor: '#02AEFD',
      borderWidth: 3,
    },
  },
  {
    name: 'B',
    value: [300, 400],
    symbol: 'rect',
    symbolSize: [90, 90],
    itemStyle: {
      color: '#FFFFFF',
      borderColor: '#1982FF',
      borderWidth: 3,
    },
  },
  {
    name: 'C',
    value: [500, 400],
    symbol: 'rect',
    symbolSize: [90, 90],
    itemStyle: {
      color: '#FFFFFF',
      borderColor: '#1982FF',
      borderWidth: 3,
    },
  },
  {
    name: 'D',
    value: [700, 400],
    symbol: 'rect',
    symbolSize: [90, 90],
    itemStyle: {
      color: '#FFFFFF',
      borderColor: '#3169F8',
      borderWidth: 3,
    },
  },
  {
    name: 'E',
    value: [900, 400],
    symbol: 'rect',
    symbolSize: [90, 90],
    itemStyle: {
      color: '#FFFFFF',
      borderColor: '#2653F1',
      borderWidth: 3,
    },
  },
  {
    name: 'F',
    value: [100, 400],
    symbol: 'rect',
    symbolSize: [90, 90],
    itemStyle: {
      color: '#FFFFFF',
      borderColor: '#41D980',
      borderWidth: 3,
    },
  },

];
option = {
  xAxis: {
    // min: 0,
    // max: 1000,
    show: false,
    type: 'value',
  },
  yAxis: {
    // min: 0,
    // max: 1000,
    show: false,
    type: 'value',
  },
  series: [
    {
      type: 'graph',
      coordinateSystem: 'cartesian2d',
      label: {
        show: true,
        position: 'inside', // inside
        // 文字
        color: '#333333',
        fontFamily: 'Microsoft YaHei',
        fontSize: 20,
        // offset: [0, 40], // 偏移量
        distance: 20, // 距离元素距离
        formatter: function (item) {
          return item.data.name;
        },
      },
      data: data,
    },
    {
      type: 'lines',
      polyline: true,
      coordinateSystem: 'cartesian2d',
      lineStyle: {
        type: 'solid',
        width: 4,
        color: '#E8EAEC',
        cap: 'round',
        join: 'round',
      },
      data: [
        //
        {
          coords: [
            [500, 860],
            [500, 700],
            [100, 700],
            [100, 550],
          ],
        },
        {
          coords: [
            [500, 560],
            [500, 700],
            [300, 700],
            [300, 550],
          ],
        },
        
        {
          coords: [
            [500, 560],
            [500, 700],
            [500, 700],
            [500, 550],
          ],
        },
        {
          coords: [
            [700, 560],
            [700, 700],
            [700, 700],
            [700, 550],
          ],
        }, 
        {
          coords: [
            [900, 560],
            [900, 700],
            [100, 700],
            [100, 550],
          ],
        },
      ],
    },
  ],
};

// 数据
const data = {
	name: 'XX第二医院',
	rank: 0,
	people: 500,
	children: [{
			name: '呼吸内科',
			rank: 1,
			people: 100,
			collapsed: false
		},
		{
			name: '内分泌科',
			rank: 2,
			people: 100,
			collapsed: false
		},
		{
			name: '心内科',
			rank: 3,
			people: 100,
			collapsed: false
		},
		{
			name: '骨科',
			rank: 4,
			people: 100,
			collapsed: false
		},
		{
			name: '普外科',
			rank: 5,
			people: 100,
			collapsed: false,
		},
	]
};
// 数图配置项
var option = {
   backgroundColor: "#fff",
	series: [{
		type: 'tree',
		data: [data],
		top: '8%',
		left: '2%',
		bottom: '20%',
		right: '2%',
		symbolSize: 7,
		symbol: 'emptyCircle',
          orient: 'vertical',//变为上下结构 去掉极为左右结构
          expandAndCollapse: true,
		label: {
			position: 'left',
			verticalAlign: 'middle',
			align: 'left',
			fontSize: 12,
			backgroundColor: '#7049f0',
			color: '#fff',
			borderRadius: 5,
			width: 200,
			formatter: function(params) {
				return [
					`{name|${params.data.name}}
`,
					`{subtitle|排名：${params.data.rank}}
`,
					`{subtitle|人数：}`,
					`{num|${params.data.people}}`,
					`{padding|}`
				].join('');
			},
			rich: {
				name: {
					fontSize: 15,
					fontWeight: 'bold',
					padding: [10, 20]
				},
				subtitle: {
					padding: [0, 20, 5, 20]
				},
				num: {
					color: 'yellow',
					padding: [0, 0, 5, -20]
				},
				padding: {
					padding: [5, 0]
				}
			}
		},
		leaves: {
			label: {
				position: 'left',
				verticalAlign: 'middle',
				align: 'left'
			}
		},
		emphasis: {
			focus: 'descendant'
		},
		edgeShape: 'polyline', // 折线连接线
		roam: false, // 可移动,可缩放
		expandAndCollapse: false,
		animationDuration: 550,
		animationDurationUpdate: 750
	}]
};