Echarts树图-解决树图只展示三层的问题

1、需求
1.1、解决树图只展示3层的问题
1.2、数据格式转换
2、实现效果

3、重点代码

initialTreeDepth: 10, //展示的层数(从0开始)

4、完整代码

//学校school>年级grade>班级class>班主任director>学生student>糖数sugar
var departmentPieData =[
    {
        "grade":[
            {
                "class":"一班",
                "director":[
                    {
                        "sugar":7,
                        "student":"小黑"
                    }
                ]
            }
        ],
        "school":"华南"
    },
    {
        "grade":[
            {
                "class":"二班",
                "director":[
                    {
                        "sugar":1,
                        "student":"小白"
                    }
                ]
            }
        ],
        "school":"华北"
    }
]
var series = {name:‘省‘,children:[]};
departmentPieData.forEach((item,i)=>{
    let layer1 = {name:item.school,children:[]};
    series.children.push(layer1);
    item.grade.forEach((s,j)=>{
        let layer2 = {name:s.class,children:[]};
        layer1.children.push(layer2);
        s.director.forEach((c,w)=>{
            let layer3 = {name:c.student,value:c.sugar};
            layer2.children.push(layer3);
        })
    })
})
// 最终数据结构：{name:‘A‘,children:[{name:‘a‘,children:[name:‘b‘,value:12]}]}
var option = {
    tooltip: {
        trigger: ‘item‘,
        triggerOn: ‘mousemove‘
    },
    series: [
         {
            type: ‘tree‘,
            initialTreeDepth: 10, //展示的层数(从0开始)
            data: [series],

            top: ‘1%‘,
            left: ‘7%‘,
            bottom: ‘1%‘,
            right: ‘20%‘,

            symbolSize: 7,

            label: {
                position: ‘left‘,
                verticalAlign: ‘middle‘,
                align: ‘right‘,
                fontSize: 12
            },
            leaves: {
                label: {
                    position: ‘right‘,
                    verticalAlign: ‘middle‘,
                    align: ‘left‘
                }
            },

            emphasis: {
                focus: ‘descendant‘
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
        }
    ]
}; 

声明：此博客为个人学习之用，如与其他作品雷同，纯属巧合，并请明示指出

Echarts树图-解决树图只展示三层的问题

原文：https://www.cnblogs.com/liliy/p/14785345.html