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', 'COO'],
            ['CTO', '技术部'],
            ['技术部', '前端开发'],
            ['技术部', '后端开发'],
            ['技术部', '测试部'],
            ['CFO', '财务部'],
            ['COO', '人力资源部'],
            ['COO', '市场部'],
            ['COO', '销售部']
        ],
        levels: [{
            level: 0,
            color: '#0066cc',
            dataLabels: {
                color: 'white'
            },
            height: 25
        }, {
            level: 1,
            color: '#0099ff',
            dataLabels: {
                color: 'white'
            },
            height: 25
        }, {
            level: 2,
            color: '#33adff',
            dataLabels: {
                color: 'white'
            },
            height: 25
        }],
        nodes: [{
            id: 'CEO',
            title: '首席执行官',
            name: 'John Smith',
            image: 'https://www.highcharts.com/samples/graphics/sun.png'
        }, {
            id: 'CTO',
            title: '首席技术官',
            name: 'David Johnson',
            image: 'https://www.highcharts.com/samples/graphics/moon.png'
        }, {
            id: 'CFO',
            title: '首席财务官',
            name: 'Lisa Williams',
            image: 'https://www.highcharts.com/samples/graphics/earth.png'
        }, {
            id: 'COO',
            title: '首席运营官',
            name: 'Kevin Brown',
            image: 'https://www.highcharts.com/samples/graphics/venus.png'
        }, {
            id: '技术部',
            title: '技术部门',
            name: 'Tech Department',
            image: 'https://www.highcharts.com/samples/graphics/asteroid.png'
        }, {
            id: '前端开发',
            title: '前端开发',
            name: 'Front-end Development',
            image: 'https://www.highcharts.com/samples/graphics/comet.png'
        }, {
            id: '后端开发',
            title: '后端开发',
            name: 'Back-end Development',
            image: 'https://www.highcharts.com/samples/graphics/galaxy.png'
        }, {
            id: '测试部',
            title: '测试部门',
            name: 'Testing Department',
            image: 'https://www.highcharts.com/samples/graphics/meteor.png'
        }, {
            id: '财务部',
            title: '财务部门',
            name: 'Finance Department',
            image: 'https://www.highcharts.com/samples/graphics/saturn.png'
        }, {
            id: '人力资源部',
            title: '人力资源部门',
            name: 'Human Resources Department',
            image: 'https://www.highcharts.com/samples/graphics/neptune.png'
        }, {
            id: '市场部',
            title: '市场部门',
            name: 'Marketing Department',
            image: 'https://www.highcharts.com/samples/graphics/uranus.png'
        }, {
            id: '销售部',
            title: '销售部门',
            name: 'Sales Department',
            image: 'https://www.highcharts.com/samples/graphics/pluto.png'
        }],
        tooltip: {
            outside: true
        },
        colorByPoint: false,
        color: '#0077cc',
        borderColor: '#0077cc',
        nodeWidth: 200
    }]
});

这段代码创建了一个Highcharts图表，并使用JSON格式的数据源定义了垂直组织架构图。通过调整levels、nodes和data属性，可以自定义图表的外观和内容。