echarts实现思维导图组织架构图效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：echarts实现思维导图组织架构图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <style>
        @charset "utf-8";
    
    /* global */
    * {margin:0;padding:0;box-sizing:border-box;}
    html, body {
    	width:100%;
    	height:100%;
    	min-width:1200px;
    	min-height:600px;
    	overflow:hidden;
    }
    body {
    	position:relative;
    	font-family:"Microsoft Yahei", Arial, sans-serif;
    	background:rgb(3, 12, 59) url("../img/bg.png") 0 0 / 100% 100% no-repeat;
    }
    
    /* layout */
    #header {
    	position:relative;
    	height:64px;
    	background:rgb(3, 12, 59) url("../img/header.png") 0 0 / 100% 100% no-repeat;
    	overflow:hidden;
    }
    #header .title {line-height:64px;text-align:center;font-size:32px;font-weight:400;color:#fff;}
    #container {position:absolute;top:0;bottom:0;left:0;right:0;}
    .chart-div {width:100%;height:100%;}
    
    /* media query */
    @media (max-width:1900px) {
    	#header {height:36px;}
    	#header .title {line-height:36px;font-size:18px;}
    	#container {top:0;}
    }
    
    /* chart-loader */
    .chart-loader {
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:99;
    	width:100%;
    	height:100%;
    	background:rgba(255, 255, 255, 0);
    	transition:all .8s;
    }
    .chart-loader .loader {
    	position:absolute;
    	left:50%;
    	top:50%;
    	width:60px;
    	height:60px;
    	margin:-30px 0 0 -30px;
    	border:3px solid transparent;
    	border-top-color:#3498db;
    	border-radius:50% !important;
    	-webkit-animation:spin 2s linear infinite;
    	animation:spin 2s linear infinite;
    }
    .chart-loader .loader:before {
    	content:"";
    	position:absolute;
    	top:3px;
    	left:5px;
    	right:5px;
    	bottom:5px;
    	border:3px solid transparent;
    	border-top-color:#e74c3c;
    	border-radius:50% !important;
    	-webkit-animation:spin 3s linear infinite;
    	animation:spin 3s linear infinite;
    }
    .chart-loader .loader:after {
    	content:"";
    	position:absolute;
    	top:9px;
    	left:10px;
    	right:10px;
    	bottom:10px;
    	border:3px solid transparent;
    	border-top-color:#f9c922;
    	border-radius:50% !important;
    	-webkit-animation:spin 1.5s linear infinite;
    	animation:spin 1.5s linear infinite;
    }
    .chart-done .chart-loader {display:none;}
    @-webkit-keyframes spin {
    	0% {
    		-webkit-transform: rotate(0deg);
    		-ms-transform: rotate(0deg);
    		transform: rotate(0deg)
    	}
    	100% {
    		-webkit-transform: rotate(360deg);
    		-ms-transform: rotate(360deg);
    		transform: rotate(360deg)
    	}
    }
    @keyframes spin {
    	0% {
    		-webkit-transform: rotate(0deg);
    		-ms-transform: rotate(0deg);
    		transform: rotate(0deg)
    	}
    	100% {
    		-webkit-transform: rotate(360deg);
    		-ms-transform: rotate(360deg);
    		transform: rotate(360deg)
    	}
    }
    </style>
</head>

<body>


    <div id="container">
        <div class="chart-div" id="treeChart">
            <div class="chart-loader">
                <div class="loader"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>

    <script type="text/javascript">
        $(function() {
        				//初始化报表对象并指定其风格
        				const treeChart = echarts.init(document.getElementById("treeChart"), 'shine');
        				//虚拟数据
        				const treeData1 = {
        					name: '董事会结构',
        					symbolSize: 10,
        					itemStyle: {color: '#d4237a'},
        					label: {fontSize: 14},
        					children: [
        						{
        							name: '董事会独立性',
        							symbolSize: 8,
        							itemStyle: {color: '#d4237a'},
        							children: [
        								{name: '董事会总人数', itemStyle: {color: '#d4237a'}},
        								{name: '行业内董事会规模人数均值', itemStyle: {color: '#d4237a'}},
        								{name: '独立董事人数', itemStyle: {color: '#d4237a'}},
        								{name: '执行董事人数', itemStyle: {color: '#d4237a'}},
        								{name: '董事长是否兼任其他高管', itemStyle: {color: '#d4237a'}},
        								{name: '董事长是否来自大股东', itemStyle: {color: '#d4237a'}},
        								{name: '兼任经理层的董事人数', itemStyle: {color: '#d4237a'}},
        								{name: '是否含有党员董事', itemStyle: {color: '#d4237a'}}
        							]
        						},
        						{
        							name: '董事会专业性',
        							symbolSize: 8,
        							itemStyle: {color: '#d4237a'},
        							children: [
        								{name: '委员会主任是否独董担任', itemStyle: {color: '#d4237a'}},
        								{name: '专业独立董事人数', itemStyle: {color: '#d4237a'}},
        								{name: '董事变更时间', itemStyle: {color: '#d4237a'}},
        								{name: '战略决策委员会', itemStyle: {color: '#d4237a'}},
        								{name: '提名委员会', itemStyle: {color: '#d4237a'}},
        								{name: '薪酬委员会', itemStyle: {color: '#d4237a'}},
        								{name: '审计委员会', itemStyle: {color: '#d4237a'}}
        							]
        						}
        					]
        				};
        				const treeData2 = {
        					name: '董事会行为',
        					symbolSize: 10,
        					itemStyle: {color: '#e6b600'},
        					label: {fontSize: 14},
        					children: [
        						{
        							name: '专门委员会会议',
        							symbolSize: 8,
        							itemStyle: {color: '#e6b600'},
        							children: [
        								{name: '召开次数', itemStyle: {color: '#e6b600'}},
        								{name: '独董出席比率', itemStyle: {color: '#e6b600'}},
  .........完整代码请登录后点击上方下载按钮下载查看