echarts树图关系图

 项目场景：

要求实现以上图片展示的样式，用的是echarts

---

 数据格式：

var data = [{
    name: "主节点主节点主节点",
    children: [{
        name: "分节点分节点分节点分节点1",
    }, {
        name: "分节点分节点分节点分节点2",
    }, {
        name: "分节点分节点分节点分节点3",
    }, {
        name: "分节点分节点分节点分节点4",
    }]
}];

实现代码

myChart.showLoading();


var data = [{
    name: "主节点主节点主节点",
    children: [{
        name: "分节点分节点分节点分节点1",
    }, {
        name: "分节点分节点分节点分节点2",
    }, {
        name: "分节点分节点分节点分节点3",
    }, {
        name: "分节点分节点分节点分节点4",
    }]
}];

myChart.hideLoading();
myChart.setOption(option = {
     backgroundColor: '#fff',
        series: [
            {
                type: 'tree',
                // name: '',
                data: data,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                        },
                        
                    },
                },
                top: '0%',
                bottom:'10%',
                right: '50%',
                left:'0',
                symbolSize: 1,
                initialTreeDepth: 2,
                edgeShape:'curve', //曲线curve和折线polyline两种,
                emphasis:{disabled:true},
                label: {
                    normal: {
                        position: 'center',
                        verticalAlign: 'middle',
                        align: 'left',
                        backgroundColor: '#003594',
                        color: '#fff',
                        padding: 3,
                        borderRadius:[8],
                        formatter: [
                            '{box|{b}}'
                        ].join('\n'),
                        rich: {
                            box: {
                                height: 28,
                                color: '#fff',
                                padding: [10, 13],
                                align: 'center',
                                fontSize:20,
                            }
                        }
                    }
                },
                leaves: {
                    label: {
                        normal: {
                            position: 'center',
                            verticalAlign: 'middle',
                            align: 'left',
                            backgroundColor: '#E5EAF4',
                            borderRadius:[5],
                            formatter: [
                                '{box|{b}}'
                            ].join('\n'),
                            rich: {
                                box: {
                                    height: 20,
                                    color: '#003594',
                                    padding: [8, 10],
                                    align: 'center',
                                    fontSize:16,
                                }
                            }
                        }
                    }
                },
                expandAndCollapse: false,
                animation:false,
            },
        ]
});

以上。

后续测试问题一：

数据返回的多少 不一致，高度不可固定，不然纵向数据会堆叠在一起。如图：

---

 

解决办法：

找到了不设置固定高度，可以动态渲染高度的方法，可以根据返回数据的length，乘上我们单个数据的高度，设置一个基准值，超过基准值就使用长度×单个高速的值作为动态高度；实现代码如下：

 
    var myChart = echarts.init(document.getElementById(id));
    let option = {}    //此处为图表配置
    myChart.setOption(option, true);
    //基准值为350，也相当于css设置的最小高度;
    var autoHeight = chart_jsonData[0].children.length * 60 > 350 ?         
    chart_jsonData[0].children.length * 60 : 350;
    myChart.getDom().style.height = autoHeight + "px";
    myChart.getDom().childNodes[0].style.height = autoHeight + "px";
    myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight);
    myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";
    //图表可以根据宽度变化自适应
    myChart.resize();
    window.onresize = myChart.resize;