手把手教你做echarts图表系列之组织结构图
在实际项目中使用echarts越来越多了，今天从一个组织结构图开始，手把手教大家开发echarts图表。
公司里的组织结构图如下：
可以参考echarts入门教程：http://echarts.baidu.com/echarts2/doc/start.html
完整代码实现：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main_orgStructure" style="width:1200px; height:400px;position: absolute; top: 10%; left: 10%;"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/tree' // 使用树状图就加载tree模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main_orgStructure'));
var commonStyle = { }
var option = {
title : {
text: '组织结构图'
},
tooltip : {
show: false,
trigger: 'item',
formatter: "{b}: {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'树图',
type:'tree',
orient: 'vertical', // vertical horizontal
rootLocation: {x: '50%', y: '15%'}, // 根节点位置 {x: 'center',y: 10}
nodePadding: 20,
layerPadding:40,
symbol: 'rectangle',
borderColor:'black',
itemStyle: {
normal: {
color: '#fff',//节点背景色
label: {
show: true,
position: 'inside',
textStyle: {
color: 'black',
fontSize: 15,
//fontWeight: 'bolder'
}
},
lineStyle: {
color: '#000',
width: 1,
type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
label: {
show: false
}
}
},
data: [
{
name: '董事会',
value: 6,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: 'black'
}
},
children: [
{
name: '总经理',
value: 6,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: 'black'
}
},
children: [
{
name: '营销中心',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
children: [
{
name: '市场部',
value: 4,
symbolSize: [60, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
},
{
name: '销售部',
value: 4,
symbolSize: [60, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
},
{
name: '客服部',
value: 4,
symbolSize: [60, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
}
]
},
{
name: '项目中心',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
children: [
{
name: '售前支持部',
value: 4,
symbolSize: [90, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
},
{
name: '项目一部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
},
{
name: '项目二部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
},
{
name: '项目三部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
}
]
},
{
name: '技术中心',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
children: [
{
name: '开发部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
},
{
name: '设计部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
},
{
name: '系统部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
}
]
},
{
name: '行政部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
}
},
{
name: '财务部',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
}
},
{
name: '其他分支',
value: 4,
symbolSize: [70, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
children: [
{
name: '汕头分公司',
value: 4,
symbolSize: [90, 30],
symbol: 'rectangle',
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
},
borderWidth: 2,
borderColor: 'black'
}
},
}
]
},
]
}]
}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
</body>
手把手教你做echarts图表系列之组织结构图的更多相关文章
- 手把手教你做JavaWeb项目：登录模块
现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...
- UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包
背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下指出错误,不会的同学请先自行脑补 ...
- 转载：手把手教你做iOS推送
手把手教你做iOS推送 http://www.cocoachina.com/industry/20130321/5862.html
- R数据分析：跟随top期刊手把手教你做一个临床预测模型
临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...
- 手把手教你做个人 app
我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...
- Android应用系列：手把手教你做一个小米通讯录（附图附源码）
前言 最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品.既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩.小米的通讯录大家估 ...
- HelloWorld系列（一）- 手把手教你做JDK环境变量配置
分下载,配置,验证三个步骤讲解如何进行JDK环境变量配置. 步骤1:首先看配置成功后的效果步骤2:下载,并解压到E:\JDK步骤3:环境变量配置步骤4:Win10 下环境变量Path的配置步骤5:验证 ...
- netty系列之:小白福利！手把手教你做一个简单的代理服务器
目录 简介 代理和反向代理 netty实现代理的原理 实战 总结 简介 爱因斯坦说过:所有的伟大,都产生于简单的细节中.netty为我们提供了如此强大的eventloop.channel通过对这些简单 ...
- 手把手教你做个AR涂涂乐
前段时间公司有一个AR涂涂乐的项目,虽然之前接触过AR也写过小Demo,但是没有完整开发过AR项目.不过经过1个多星期的学习,现在已经把项目相关的技术都学会了,在此向互联网上那些乐于分享的程序员前辈们 ...
随机推荐
- Java IO NIO详细讲解
1.IO Java IO概述 2.NIO Java NIO浅析
- 【Linux U-boot】U-Boot相关命令
<1> help --帮助命令环境变量相关: <2> printenv --查看环境变量也可以使用缩写:print 查看某一个环境变量的值,例子:printenv bootar ...
- Tarjan水题系列(1):草鉴定Grass Cownoisseur [USACO15JAN]or[luogu P3119]
题目如下: 约翰有n块草场,编号1到n,这些草场由若干条单行道相连.奶牛贝西是美味牧草的鉴赏家,她想到达尽可能多的草场去品尝牧草. 贝西总是从1号草场出发,最后回到1号草场.她想经过尽可能多的草场,贝 ...
- [LeetCode] 45. 跳跃游戏 II
题目链接 : https://leetcode-cn.com/problems/jump-game-ii/ 题目描述: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位 ...
- Python 入门之 模块
Python 入门之 模块 1.模块 (1)模块是什么? 将一些常用的功能封装到一个文件中,那么这个存储着很多常用的功能的py文件,就是模块. 模块就是文件,存放一堆常用的函数.模块,就是一些常用 ...
- 计算机系统结构总结_Instruction Set Architecture
Textbook:<计算机组成与设计——硬件/软件接口> HI<计算机体系结构——量化研究方法> QR 这节我们来看CPU内部的一些东西. Instruct ...
- Ruby下安装cocoapods
常规安装:(文末:特殊安装) 注: 1.Mac OS X EI Capitan 10.11中需要更改安装路劲: sudo gem install -n /usr/local/bin cocoapods ...
- Auth主件的(RBAC) 六表
1.RBAC 和Auth的区别 基于RBAC一般Djagno 会用 和Auth 相对来说高级一点 2.RBAC( role Based Accsess Control)的六表之间的数据传输 2.1 D ...
- hdu 1059 Dividing bitset 多重背包
bitset做法 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a ...
- python 编码解码
一种编码想要转成另一种编码,需要先解码成万国码:Unicode,然后再从Unicode转成其他编码. 例如GBK格式想要转成utf-8,需要先按照 gbk 的格式 decode 成 unicode,再 ...