echarts实现树状图思维导图组织结构图效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现树状图思维导图组织结构图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
}
a:link, a:visited {
color: #4682b4;
}
a:hover {
color: #4169e1;
}
#main {
width: 2100px;
height: 2400px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-all.js"></script>
<script >
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: 'Ice Bucket Challenge' },
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true } } },
series: [
{
name: 'Fig Tree',
type: 'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: { x: 100, y: 'center' }, // 根节点位置 {x: 100, y: 'center'}
nodePadding: 8,
layerPadding: 200,
hoverable: false,
roam: true,
symbolSize: 6,
itemStyle: {
normal: {
color: '#4883b4',
label: {
show: true,
position: 'right',
formatter: "{b}",
textStyle: {
color: '#000',
fontSize: 12 } },
lineStyle: {
color: '#ccc',
type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
} },
emphasis: {
color: '#4883b4',
label: {
show: false },
borderWidth: 0 } },
data: [{
"name": "Ice Bucket Challenge",
"children": [{
"name": "Liu Zuohu",
"children": [{
"name": "Zhou",
"children": [{
"name": "Ma" },
{
"name": "Xu Xiaoping",
"children": [{
"name": "Niu Wenwen",
"children": [{
"name": "Yao Jinbo",
"children": [{
"name": "Cai Wensheng" },
{
"name": "Cai" },
{
"name": "Wang Fei" }] },
{
"name": "Yangshou Bin",
"children": [{
"name": "All entrepreneurs" },
{
"name": "all investors" },
{
"name": "All of entrepreneurial services" }] },
{
"name": "Pu Yi" }] },
{
"name": "Luo Zhenyu",
"children": [{
"name": "Luo Ji thinking 25000 Member" }] },
{
"name": "Wong" }] },
{
"name": "Huang Zhang" }] },
{
"name": "Overheating" },
{
"name": "Liu Jiangfeng",
"children": [{
"name": "He just",
"children": [{
"name": "Xie Qingjiang" },
{
"name": "Wang Xiang" },
{
"name": "Wei Ai" }] },
{
"name": "Wang Yulei" }] }] },
{
"name": "Lei Jun",
"children": [{
"name": "Andy",
"children": [{
"name": "Lang Lang" },
{
"name": "Su Hua Wei" },
{
"name": "Jay",
"children": [{
"name": "Vincent Fang",
"children": [{
"name": "Giddens" },
{
"name": "Alan Kuo" }] },
{
"name": "Mayday",
"children": [{
"name": "Xie Jin Yan",
"children": [{
"name": "Zhao Hui Sin" },
{
"name": "Zhang Fei",
"children": [{
"name": "Little S" }] },
{
"name": "Aaron" }] },
{
"name": "Olivia" },
{
"name": "Takeshi Kaneshiro" }] }] }] },
{
"name": "Li",
"children": [{
"name": "Mr Yu" },
{
"name": "Pan Shiyi",
"children": [{
"name": "Ren" }] },
{
"name":.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0