基于echarts树图画组织结构图

最新推荐文章于 2024-07-28 20:27:10 发布

linziping

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量1.3w

点赞数 4

分类专栏： javascript 文章标签： echarts 树图 tree 组织架构图

本文链接：https://blog.csdn.net/linziping/article/details/93095447

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

基于echarts树图画组织结构图

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

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

<!DOCTYPE html>
<html>
	<head>
	...
	<style type="text/css">
		/*宽高根据实际需要调节*/
    	#main { height:180%; width: 100%;}
    </style>
	</head>
	<body>
		<div id="main"></div>
		<!-- 注：此处引入的是未压缩文件 -->
    	<script src="../../js/plugins/echarts-4.2.1/dist/echarts.js"></script>
    	<script>
    		var myChart = echarts.init(document.getElementById('main'));
    		var data = {
    			"name": "xxxx",
    			"children": [
    				 ...
				]
			};
    		var option = {
				...
			    series:[
			        {
			            type: 'tree',                         // 设置树图
			            name: 'xxxx',
			            data: [data],
			            layout: 'orthogona',                  // 正交布局（水平布局）
			            symbol: 'rect',                       // 矩形标记
			            symbolSize: [88, 30],                 // 标记大小
			            initialTreeDepth: 2,                  // 树图层级
			            label: {
			                normal: {
			                    position: 'right',
			                    verticalAlign: 'middle',
			                    fontSize: 12,
			                    offset: [-86, 0],             // 文本偏移量
			                    color:'#00173d',
			                    align: 'left'
			                }
			            },
			            lineStyle: {
			              	 curveness: 0.5,                 // 树图边的曲度
			            }
			        }
			    ]
			}
			myChart.setOption(option);
		</script>
    </body>
 </html>

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
//  };
}

效果图
在这里插入图片描述