基于echarts树图画组织结构图

注：新版本echarts已有折线树图绘制功能(Tree with Polyline)，本法适合v4.2.1之前版本
1、下载echarts插件
官网地址：https://echarts.baidu.com/
下载地址：https://echarts.baidu.com/download.html

2、页面引入插件并初始化

	
	...
	
	
	
		

		
    	
    	
    
 

3、树图初始效果

4、修改echarts.js源码使树图显示成组织架构图

/*
* 修改updateNode函数
* 把生成连接各节点的贝塞尔曲线BezierCurve，改成多边形折线Polyline
* 修改getEdgeShape方法，生成多边形折线的各个点坐标
*  注：echarts使用了zrender
*/
function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope){
	...
	if (node.parentNode && node.parentNode !== virtualRoot){
        var edge = symbolEl.__edge;
        // 贝塞尔曲线
//      if (!edge) {
//          edge = symbolEl.__edge = new BezierCurve({
//              shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
//              style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
//          });
//      }
//
//      updateProps(edge, {
//          shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
//          style: {opacity: 1}
//      }, seriesModel);

        // 多边形折线
        if (!edge) {
            edge = symbolEl.__edge = new Polyline({
                shape: {
                	points: getEdgeShape(seriesScope, sourceLayout, targetLayout)
                },
                style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
            });
        }

        updateProps(edge, {
            shape: {
            	points: getEdgeShape(seriesScope, sourceLayout, targetLayout)
            },
            style: {opacity: 1}
        }, seriesModel);

        group.add(edge);
	}
	...
}

/*
*  修改水平方向（orient === 'LR' || orient === 'RL）的坐标生成方式（可根据需要自己调整）
* 利用curvature调节折线位置坐标，curvature范围:0~1
* 返回多边形折线Polyline需要的二位数组坐标
*/
function getEdgeShape(seriesScope, sourceLayout, targetLayout) {
    var cpx1;
    var cpy1;
    var cpx2;
    var cpy2;
    var orient = seriesScope.orient;
    var x1;
    var x2;
    var y1;
    var y2;

    if (seriesScope.layout === 'radial') {
		...
    }
    else {
        x1 = sourceLayout.x;
        y1 = sourceLayout.y;
        x2 = targetLayout.x;
        y2 = targetLayout.y;
        if (orient === 'LR' || orient === 'RL') { //  折线节点坐标
//          cpx1 = x1 + (x2 - x1) * seriesScope.curvature;
//          cpy1 = y1;
//          cpx2 = x2 + (x1 - x2) * seriesScope.curvature;
//          cpy2 = y2;
            cpx1 = x1 + (x2 - x1) * seriesScope.curvature;
            cpy1 = y1;
            cpx2 = x1 + (x2 - x1) * seriesScope.curvature;
            cpy2 = y2;
        }
        if (orient === 'TB' || orient === 'BT') {
			...
        }
    }
    return [[x1,y1],[cpx1,cpy1],[cpx2,cpy2],[x2,y2]]; // 二维数组
//  return {
//      x1: x1,
//      y1: y1,
//      x2: x2,
//      y2: y2,
//      cpx1: cpx1,
//      cpy1: cpy1,
//      cpx2: cpx2,
//      cpy2: cpy2
//  };
}

效果图