Echarts可视化开发之树型图（公司⼈事架构图）
引⾔:Echarts是百度开发的⼀款可视化的开源js框架，诸如此类的框架很多，今天我们就重点研究Echarts。使⽤Echarts⾮常简单，我们将需要展⽰的数据源以及可视化效果以参数的形式传⼊Echarts中即可。
⼀.Echarts使⽤
我们以官⽹的⼀个关于制作简单的树形图为例⼦，说明Echarts开发的整套流程。
1.开发流程
1).编写visual.hmtl⽂件，并引⼊echarts.js⽂件。
我们这⾥使⽤的是echarts 2.x版本，因为3.x版本中tree结构被移除了。详情见
2).定义⼀个容器
我们将可视化展⽰的图形放在⼀个定制好的容器中，这⾥所说的容器是div或者 可以容纳其他元素的便签。
3).配置数据源和参数
通过echarts提供的接⼝配置我们需要展⽰的数据源和效果
2.demo程序
1)效果展⽰如下:
2)核⼼代码如下:
<html>
<head>
<meta charset="UTF-8">
<title>社交⽹络</title>
<style>
</style>
<script src="js"></script>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div >
<div id="main" >
</div>
</div>
<script type="text/javascript">
//定义echarts容器
var myChart = echarts.ElementById('main'), 'macarons');
option = {
option = {
title : {
text: '⼿机品牌',
subtext: '线、节点样式'
},
series : [
{
name:'树图',
type:'tree',
orient: 'horizontal',  // vertical horizontal
rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
nodePadding: 20,
symbol: 'circle',
symbolSize: 40,
itemStyle: {
normal: {
label: {
show: true,
position: 'inside',
textStyle: {
color: '#cc9999',
fontSize: 15,
fontWeight:  'bolder'
}
},
lineStyle: {
color: '#000',
width: 1,
type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
label: {
show: true
}
}
},
data: [
{
name: '⼿机',
value: 6,
symbolSize: [90, 70],
symbol: 'image://www.iconpng/png/ecommerce-business/iphone.png',                    itemStyle: {
normal: {
label: {
show: false
}
}
},
children: [
{
name: '⼩⽶',
value: 4,
symbol: 'image://pic.58pic/58pic/12/36/51/66d58PICMUV.jpg',
itemStyle: {
normal: {
label: {
show: false
}
}
},js制作简单的焦点图效果
symbolSize: [60, 60],
children: [
{
name: '⼩⽶1',
name: '⼩⽶1',
symbol: 'circle',
symbolSize: 20,
value: 4,
itemStyle: {
normal: {
color: '#fa6900',
label: {
show: true,
position: 'right'
},
},
emphasis: {
label: {
show: false
},
borderWidth: 0
}
}
},
{
name: '⼩⽶2',
value: 4,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: "{b}"
},
color: '#fa6900',
borderWidth: 2,
borderColor: '#cc66ff'
},
emphasis: {
borderWidth: 0
}
}
},
{
name: '⼩⽶3',
value: 2,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
position: 'right'
},
color: '#fa6900',
brushType: 'stroke',
borderWidth: 1,
borderColor: '#999966',                                        },
emphasis: {
borderWidth: 0
}
}
}
]
},
{
{
name: '苹果',
symbol: 'image://www.viastreaming/images/apple_logo2.png',
symbolSize: [60, 60],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 4
},
{
name: '华为',
symbol: 'image://market.huawei/hwgg/logo_cn/download/logo.jpg',
symbolSize: [60, 60],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 2
},
{
name: '联想',
symbol: 'image://www.lenovo/HomeUpload/Home001/6d94ee9a20140714.jpg',
symbolSize: [100, 40],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 2
}
]
}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
⼆.根据不同数据源，定制开发tree图
我们从上⾯的demo程序中知道画树型图重点在于如何描述数据，上⾯配置参数⾥的data形式如下
data是⼀个数组形式，它是⽤来表⽰多个数据源，由于我们这⾥只需要使⽤⼀个数据源。所以我们只要提供类似{}结构的⼀个对象即可。即[{根对象}]，我们这⾥只简单使⽤了name和children属性来说明问题。
[{name:"根",children:[
{"name":"⼦根1",children:[...]},
{"{"name":"⼦根2",children:[...]}
{"name":"⼦根3",children:[....]},
]}]
我们从这⾥不难看出这⾥是⼀个递归结构的数据形式。所以重点是把我们定义的数据源能够转化成这样的⼀种形式。
我们对数据源进⾏分层，即建⽴⽗⼦关系。
数据源形式可以如下
var zNodes=[
{id:1,pId:0,name:"董事长"},
{id:11,pId:1,name:"经理"},
{id:12,pId:1,name:"副总"},
{id:13,pId:1,name:"秘书"},
{id:16,pId:11,name:"财务经理"},
{id:27,pId:11,name:"⼈事经理"},
{id:18,pId:12,name:"HR"},
]
1.建⽴每个节点到对应⼦节点列表的映射，即groups对象结构,⾥⾯存放着每个节点id和对应⼦节点的映射
groups={}
for(var i=0;i<zNodes.length;i++){
var pid=zNodes[i]['pId']
//如果该pid对应组不存在
if(!groups[pid])
groups[pid]=[]
//添加⼦节点
groups[pid].push(zNodes[i])
}
2.从根节点开始构建tree树需要的数据结构，这⾥是⼀个递归函数的应⽤，递归函数的三个重要的点在于结束条件，向下传递的表达式，向上返回的表达式。即结束条件和递归表达式。递归其实是将⼀个⼤问题分解成若⼲相似的⼩问题来解决。我思考这个问题时从以下2个点进⾏考虑:
1)结束条件以及此时返回的值。
如果某节点下不存在⼦节点则返回，不在继续递归下去。此时返回该节点的信息
2)抽象程序的流程。
其实针对这类树问题，我们可以将其变成树和⼦树的关系来考虑，其实就是构建根节点下的各个⼦树
的数据,⽽⼦树的结构同样也是构建以该⼦树为跟的⼦树的结构。这⾥其实就是⼀个树的递归的定义过程。
描述如下:
//以根节点id为⼊⼝

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。