[echarts]组织结构图数据处理

一、原数据结构

OrganizationalStructureData（仅展示部分）

{
    "deptId": 1,
    "name": "玉洁一公司",
       "hospitalList": [
        {
            "hospitalId": 1,
            "hospitalName": "绵阳市中心医院",
            "departmentList": [
                {
                    "departmentId": 1,
                    "departmentName": "消化内科",
                    "managerList": [
                        {
                            "userId": 13,
                            "realname": "李四",
                        },
                    ],
                }
            ]
        }
    ]
}

二、数据处理及生成图代码 

import React from 'react';
import {connect} from "dva";
import * as echarts from "echarts";

@connect(({global}) => ({
  global,
}))

class MyGraphComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const {dispatch}=this.props;
    dispatch({
      type:'global/getOrganizationalStructureData',
      payload:{},
      callback:()=>{ // 使用回调函数 在获取到数据后再初始化树
        this.initTree()
      }
    })
  }

  // eslint-disable-next-line react/sort-comp
  initTree =() => {
    const{global:{OrganizationalStructureData}}=this.props;
// 将数据处理成标准格式
    if (OrganizationalStructureData !== undefined && OrganizationalStructureData[0] !== undefined && OrganizationalStructureData[0].hospitalList !== undefined) {
      const {hospitalList} = OrganizationalStructureData[0];
      const currentData = {
        "name": OrganizationalStructureData[0].name,
        "children": [
          {
            "name": hospitalList[0].hospitalName,
            "children": hospitalList[0].departmentList.map((department) => ({
              "name": department.departmentName,
              "children": department.managerList.map((manager) => ({
                'name': manager.realname
              }))
            })),
          }
        ]
      };
      const chartDom = document.getElementById('container');
      const myChart = echarts.init(chartDom);
      let option;
      myChart.showLoading();
      myChart.hideLoading();
      myChart.setOption(
        (option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              data: [currentData],
              top: '1%',
              left: '7%',
              bottom: '1%',
              right: '20%',
              symbolSize: 10,
              initialTreeDepth: 3,
              edgeShape: 'polyline',
              label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 9
              },
              leaves: {
                label: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                },
              },
              emphasis: {
                focus: 'descendant'
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750,
              itemStyle: {
                borderColor: 'rgb(176,196,222)',
                borderWidth: 1,
                borderType: 'solid'
              }
            }
          ]
        })
      );
      // eslint-disable-next-line no-unused-expressions
      option && myChart.setOption(option);
    }
  }

  render() {
    return (
      <div
        id='container'
        style={{ height: '500px' }}
      />
    )
  }
}

export default MyGraphComponent;

三、效果展示