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

代码语言:html

所属分类:图表

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

代码标签: 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'}},
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0