Echarts可视化开发之树型图(公司人事架构图)

引言:Echarts是百度开发的一款可视化的开源js框架,诸如此类的框架很多,今天我们就重点研究Echarts。使用Echarts非常简单,我们将需要展示的数据源以及可视化效果以参数的形式传入Echarts中即可。

一.Echarts使用

我们以官网的一个关于制作简单的树形图为例子,说明Echarts开发的整套流程。

1.开发流程

1).编写visual.hmtl文件,并引入echarts.js文件。

我们这里使用的是echarts 2.x版本,因为3.x版本中tree结构被移除了。详情见echarts配置及下载官方文档

2).定义一个容器

我们将可视化展示的图形放在一个定制好的容器中,这里所说的容器是div或者 可以容纳其他元素的便签。

3).配置数据源和参数

通过echarts提供的接口配置我们需要展示的数据源和效果

2.demo程序

1)效果展示如下:

2)核心代码如下:

完整demo程序下载

二.根据不同数据源,定制开发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

2.从根节点开始构建tree树需要的数据结构,这里是一个递归函数的应用,递归函数的三个重要的点在于结束条件,向下传递的表达式,向上返回的表达式。即结束条件和递归表达式。递归其实是将一个大问题分解成若干相似的小问题来解决。我思考这个问题时从以下2个点进行考虑:

1)结束条件以及此时返回的值。

如果某节点下不存在子节点则返回,不在继续递归下去。此时返回该节点的信息

2)抽象程序的流程。

其实针对这类树问题,我们可以将其变成树和子树的关系来考虑,其实就是构建根节点下的各个子树的数据,而子树的结构同样也是构建以该子树为跟的子树的结构。这里其实就是一个树的递归的定义过程。

描述如下:

//以根节点id为入口

function rescusive(number){
//根节点
var node={}
//存放子树
var data=[]
childrenList=groups[number]
//如果不存在子节点,这里其实就是结束条件
if(!childenList||childrenList.length==0){
node['name']=number;
node['children']=[]
return node;
}
for(var i=0;i

3.构建tree数据

下面我们通过整合以上代码,通过面向对象编程的思想进行完成构建该对象

1)TreeGraph.js文件内容如下:

function treeMenu(a){
    //列表map形式
    this.tree=a||[];
    this.groups={};
	//存放id与对应的name映射
	this.nameMap={}
	//得到每个点对应的层次,为了后期进行布局
	this.levelMap={}
	//样式设计
	this.style={"symbolSize":[60,50,40,30,20],"value":[8,6,4,2,1]}
};
treeMenu.prototype={
    init:function(pid){
        this.group();
		this.MapNamebyId();
		this.setIdLevel(pid);
        return this.rescusive(pid);
    },
    group:function(){
        for(var i=0;i=5)
			level=5;
		var symbolize=0
		var value=0
		symbolize=this.style['symbolSize'][level-1]
		value=this.style['value'][level-1]
		var styleValue={}
		styleValue['symbolSize']=symbolize
		styleValue['value']=value
		return styleValue
	},
    MapNamebyId:function(){
		for(var i=0;irescusive:function (number){//这里是构建数据源的重点
		var data=[]
		var node={}
		var styleValue={}
		//某个节点下的子节点
		var a=this.groups[number];
		var nodeName=this.nameMap[number];
		if(a==null||a==undefined){
			styleValue=this.getStyleById(number)
			//设置节点
			this.setNode(node,nodeName,styleValue['symbolSize'],styleValue['value'],[])
			return node;
		}
		for(var i=0;i

2) html页面代码如下:

3)页面效果如下:

4)完整代码及echart.js下载见可视化树图完整代码

三 .总结

基础知识很重要,之前对于递归虽然有所了解,但是理解不深。通过这次实践加深了对递归的理解和应用。关于echarts可视化这块,重点学习如何插入数据源和修改样式。