echarts实现思维导图组织架构图效果代码
代码语言：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'}},
{name: '提交董事会议题数', itemStyle: {color: '#e6b600'}},
{name: '董事会采纳议题数', itemStyle: {color: '#e6b600'}}
]
},
{
name: '董事会会议',
symbolSize: 8,
itemStyle: {color: '#e6b600'},
children: [
{name: '召开次数', itemStyle: {color: '#e6b600'}},
{name: '通讯会议次数', itemStyle: {color: '#e6b600'}},
{name: '会议议题数', itemStyle: {color: '#e6b600'}},
{name: '表决反对票数', itemStyle: {color: '#e6b600'}},
{name: '独董出席比率', itemStyle: {color: '#e6b600'}},
{name: '独董独立发表反对意见数', itemStyle: {color: '#e6b600'}}
]
},
{
name: '股东大会',
symbolSize: 8,
itemStyle: {color: '#e6b600'},
children: [
{name: '股东大会的董事出席率', itemStyle: {color: '#e6b600'}},
{name: '股东大会是否采用累积投票制', itemStyle: {color: '#e6b600'}},
{name: '股东大会决议事项投票率', itemStyle: {color: '#e6b600'}},
{name: '董事会决议事项反对率', itemStyle: {color: '#e6b600'}}
]
},
{
name: '与党委的关系',
symbolSize: 8,
itemStyle: {color: '#e6b600'},
children: [
{name: '党建条款是否进入公司章程', itemStyle: {color: '#e6b600'}},
{name: '党委与董事会成员是否双向进入、交叉任职', itemStyle: {color: '#e6b600'}},
{name: '决策程序上是否党委会前置', itemStyle: {color: '#e6b600'}},
{name: '是否披露党委会等党组织参与治理情况', itemStyle: {color: '#e6b600'}}
]
}
]
};
const treeData3 = {
name: '社会责任',
symbolSize: 10,
itemStyle: {color: '#005eaa'},
label: {fontSize: 14},
children: [
{
name: '社会',
symbolSize: 8,
itemStyle: {color: '#005eaa'},
children: [
{name: '每股社会责任值', itemStyle: {color: '#005eaa'}},
{name: '纳税总额', itemStyle: {color: '#005eaa'}},
{name: '就业人数', itemStyle: {color: '#005eaa'}},
{name: '环保、扶贫和慈善投入', itemStyle: {color: '#005eaa'}}
]
},
{
name: '股东',
symbolSize: 8,
itemStyle: {color: '#005eaa'},
children: [
{name: '净资产收益率', itemStyle: {color: '#005eaa'}},
{name: '市值增值率', itemStyle: {color: '#005eaa'}},
{name: '股息率', itemStyle: {color: .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0