【Echarts】基于Echarts的横向组织结构图：修改树图(横向、连接线由曲线转为直角线)

最终效果：

基于echart树图的横向组织结构图（连接线为直角线）完整代码，包括echart.js文件和网页代码。

---

实现步骤：

点击查看从左至右树状图官方示例，效果以及代码如下：

myChart.showLoading();    //显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id')); 
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();    //得到数据后隐藏Loading标志
 
    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });    //间隔展开子数据，animate，display，physics，scale，vis是展开的
 
    myChart.setOption(option = {
        tooltip: {    //提示框组件
            trigger: 'item',    //触发类型，默认：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）。可选：'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
            triggerOn: 'mousemove'    //提示框触发的条件，默认mousemove|click（鼠标点击和移动时触发）。可选mousemove：鼠标移动时，click：鼠标点击时，none：        
        },
        series: [    //系列列表
            {
                type: 'tree',    //树形结构
 
                data: [data],    //上面从flare.json中得到的数据
 
                top: '1%',       //距离上
                left: '7%',      //左
                bottom: '1%',    //下
                right: '20%',    //右的距离
 
                symbolSize: 7,   //标记的大小，就是那个小圆圈，默认7
 
                label: {         //每个节点所对应的标签的样式
                    normal: {
                        position: 'left',       //标签的位置
                        verticalAlign: 'middle',//文字垂直对齐方式，默认自动。可选：top，middle，bottom
                        align: 'right',         //文字水平对齐方式，默认自动。可选：top，center，bottom
                        fontSize: 9             //标签文字大小
                    }
                },
 
                leaves: {    //叶子节点的特殊配置，如上面的树图示例中，叶子节点和非叶子节点的标签位置不同
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },
 
                expandAndCollapse: true,    //子树折叠和展开的交互，默认打开
                animationDuration: 550,     //初始动画的时长，支持回调函数,默认1000
                animationDurationUpdate: 750//数据更新动画的时长，默认300
            }
        ]
    });
});

其中不明确的是数据结构，附上自己的数据：

data = {
            "name": "实验标题",
            "children": [
                {
                    "name": "实验方法1",
                    "children": [
                        {
                            "name": "育种实验1",
                            "children": [
                                {
                                    "children": [],
                                    "name": "实验步骤1"
                                }, {
                                    "children": [],
                                    "name": "实验步骤2"
                                }, {
                                    "children": [],
                                    "name": "实验步骤3"
                                }, {
                                    "children": [],
                                    "name": "实验步骤4"
                                }
                            ]

                        }, {
                            "name": "育种实验2",
                            "children": [
                                {
                                    "children": [],
                                    "name": "实验步骤1"
                                }
                            ]

                        }
                    ]

                },
                {
                    "name": "实验方法2",
                    "children": [
                        {
                            "children": [],
                            "name": "育种实验3"
                        }
                    ],

                }
            ]


        }

可以设置树图的方向：

orient: 'horizontal', //放置组件的方式：水平（'horizontal'）或者竖直（'vertical'）

更改节点的样式：

series: [
                {
                    type: 'tree', //树形结构

                    data: [data], // 数据

                    left: '12%', //距离左
                    right: '12%',//右
                    top: '10%',
                    bottom: '10%',

                    symbol: 'rectangle', // 长方形
                    // symbol: 'emptyCircle', // 图元的图形类别  emptyCircle：占位圆
                    // symbolSize:20, //标记大小，就是那个小圈圈，默认7
                    symbolSize: [120, 40],  // 长方形的宽、高
                    itemStyle: {
                        normal: {
                            color: '#fff',//节点背景色
                            borderWidth: 0.5,
                            borderColor: 'black',
                            lineStyle: {
                                color: '#000',
                                width: 1,
                                type: 'solid' // 连线的样式 'curve'|'broken'|'solid'|'dotted'|'dashed' 
                            }
                        }

                    },


                    orient: 'horizontal', //放置组件的方式：水平（'horizontal'）或者竖直（'vertical'）


                    expandAndCollapse: true,//默认：true；子树折叠和展开的交互，默认打开 。

                    initialTreeDepth: 3,//默认：2，树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，... ，直到叶子节点

                    label: {    // 每个节点所对应的标签的样式
                        normal: {
                          
                            fontSize: 20,//文字的字体大小
                        }
                    },

                 
                    animationDurationUpdate: 750

                }
            ]

效果图如下：

获取完整代码链接：基于echart树图的横向组织结构图（连接线为曲线）完整代码。

现将树图连接曲线修改为直角线，直接修改echarts.js的插件源码;修改updateNode和getEdgeShape两个函数即可。

function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope){
 
	if (node.parentNode && node.parentNode !== virtualRoot){
     
        var edge = symbolEl.__edge;
        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);
	}
	...
}


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 = x1 + (x2 - x1) * seriesScope.curvature;
            cpy2 = y2;
        }
        if (orient === 'TB' || orient === 'BT') {
     
			...
        }
    }

    return [[x1,y1],[cpx1,cpy1],[cpx2,cpy2],[x2,y2]]; 
}

最终效果图：

参考资料：链接