highcharts实现组织架构图源码

以下是一个简单的示例代码，演示如何使用 Highcharts 实现组织架构图：

HTML 代码：

<div id="container"></div>

JavaScript 代码：

Highcharts.chart('container', {
  chart: {
    height: 600,
    inverted: true
  },
  title: {
    text: '组织架构图'
  },
  series: [{
    type: 'organization',
    name: '高管团队',
    keys: ['from', 'to'],
    data: [
      ['CEO', 'CTO'],
      ['CEO', 'CFO'],
      ['CEO', 'CMO'],
      ['CTO', 'VP1'],
      ['CTO', 'VP2'],
      ['CFO', 'VP3'],
      ['CMO', 'VP4'],
      ['VP1', 'D1.1'],
      ['VP1', 'D1.2'],
      ['VP2', 'D2.1'],
      ['VP2', 'D2.2'],
      ['VP3', 'D3.1'],
      ['VP4', 'D4.1']
    ],
    levels: [{
      level: 0,
      color: 'silver',
      dataLabels: {
        color: 'black'
      },
      height: 25
    }, {
      level: 1,
      color: 'silver',
      dataLabels: {
        color: 'black'
      },
      height: 25
    }, {
      level: 2,
      color: '#980104'
    }, {
      level: 3,
        color: '#359154'
    }],
    nodes: [{
      id: 'CEO',
      title: 'CEO'
    }, {
      id: 'CTO',
      title: 'CTO'
    }, {
      id: 'CFO',
      title: 'CFO'
    }, {
      id: 'CMO',
      title: 'CMO'
    }, {
      id: 'VP1',
      title: 'VP1'
    }, {
      id: 'VP2',
      title: 'VP2'
    }, {
      id: 'VP3',
      title: 'VP3'
    }, {
      id: 'VP4',
      title: 'VP4'
    }, {
      id: 'D1.1',
      title: '部门1.1'
    }, {
      id: 'D1.2',
      title: '部门1.2'
    }, {
      id: 'D2.1',
      title: '部门2.1'
    }, {
      id: 'D2.2',
      title: '部门2.2'
    }, {
      id: 'D3.1',
      title: '部门3.1'
    }, {
      id: 'D4.1',
      title: '部门4.1'
    }]
  }],
  tooltip: {
    outside: true
  },
  exporting: {
    allowHTML: true,
    sourceWidth: 800,
    sourceHeight: 600
  }
});

这段代码使用 `Highcharts.chart` 函数创建了一个组织架构图，并将其渲染到了 `id` 为 `container` 的 `div` 元素中。其中的 `series` 属性指定了图表的数据和样式，`nodes` 属性定义了节点的标题和 ID，`levels` 属性定义了每个层级的颜色、高度和数据标签颜色。其他的属性则用于控制图表的样式和交互行为。

你可以根据自己的需求修改这段代码，以实现更复杂的组织架构图。