手把手教你做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个多星期的学习,现在已经把项目相关的技术都学会了,在此向互联网上那些乐于分享的程序员前辈们 ...
随机推荐
- strtoul()要优于atoi()函数---C语言
strtoul():将字符串转为长整型整数 atoi():将字符串转为整型整数 在32位STM32中,int是32位的,如果字符串是“3123456789”,大于0x7fff fff,用atoi()函 ...
- c++多线程并发学习笔记(1)
共享数据带来的问题:条件竞争 避免恶性条件竞争的方法: 1. 对数据结构采用某种保护机制,确保只有进行修改的线程才能看到修改时的中间状态.从其他访问线程的角度来看,修改不是已经完成了,就是还没开始. ...
- spring cloud zuul过滤器修改requestURI 忽略大小写
通过zuul网关处理requestURI可以做很多事情,如对uri的解密,转发,大小写转化等. 这里对URI做一个简单的大小写的转化. 写一个filter实现ZuulFilter: package c ...
- 如何将DataTable转换成List<T>
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- gorpeln的个人博客 - gorpeln
2019-10-18 App Store 审核指南 2019-10-03 锚点跳转距离顶部指定距离 2019-09-23 Jekyll 简单加密 (pwd=123456) 2019- ...
- es7.2版本安装ik分词
(一)到官网下载https://github.com/medcl/elasticsearch-analysis-ik对应版本的ik(直接下载releases版本,避免maven打包!!!如果不是这个版 ...
- React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...
- nodejs 操作 mongodb 数据库
操作手册: npmjs.com 搜索: mongodb 使用官方的 mongodb 包来操作 https://github.com/mongodb/node-mongodb-native ...
- Codeforces Round #567 (Div. 2)B. Split a Number (字符串，贪心)
B. Split a Number time limit per test2 seconds memory limit per test512 megabytes inputstandard inpu ...
- 前端之CSS：CSS补充
css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...