Echarts -股权图

html

<div id="main" style="height:100vh;width:100vw"></div>

javaScript

<script type="text/javascript" src="./js/echarts.min.js"/>
  var myChart = echarts.init(document.getElementById('main'))
  var data = [{
    name: '名称',
    root: true,
    value: 3756,
    children: [{
      children: [{
        catalogCount: 451,
        children: [{
          catalogCount: 59,
          classifyDesc: null,
          classifyLevel: 3,
          classifyName: '数据1',
          classifyTypeName: '数据2',
          id: '464294383214878721',
          name: '数据3',
          parentId: '464294383214878720',
          status: 1,
          value: 59,
        }, ],
        classifyDesc: null,
        classifyLevel: 2,
        classifyName: '数据4',
        classifyTypeName: '数据5',
        id: '464294383214878720',
        name: '数据6',
        parentId: '464294383210684417',
        status: 1,
        value: 451,
      }, ],
      catalogCount: 906,
      classifyDesc: null,
      classifyLevel: 1,
      classifyName: '数据7',
      classifyTypeName: '数据8',
      id: '464294383210684417',
      name: '数据9',
      parentId: '464294383210684416',
      status: 1,
      value: 906,
    }],
    childrenCount: 1111
  }]
  var option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: function (params) {
        if (params.data.classifyDesc) {
          return params.data.classifyDesc
        } else {
          return params.data.name + '(' + params.data.value + ')'
        }
      }
    },
    series: [{
      type: 'tree',
      data: data,
      // symbol: 'rect',
      symbol: "image://./img/bg.png", // 图片自行解决
      orient: 'TB',
      z: 0,
      symbolSize: function (value, params) {
        if (params.data.root) {
          return [250, 50]
        } else {
          return [100, 30]
        }
      },
      edgeShape: 'polyline',
      initialTreeDepth: 1,
      itemStyle: {
        color: function (params) {
          if (params.data.root) {
            return '#5082de'
          } else {
            return '#9ab7ed'
          }
        },

        borderColor: 'transparent',
      },
      label: {
        position: 'inside',
        color: '#000',
        fontSize: 14,
        verticalAlign: 'middle',
        align: 'center',
      },
      lineStyle: {
        color: '#77a1d8'
      },
      leaves: {
        label: {
          position: 'inside',
          verticalAlign: 'middle',
          align: 'center',
          fontSize: 12
        }
      },

      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }]
  }
  myChart.setOption(option);

效果