Echarts树形图展开和收缩

一、实现效果

收缩效果：
Echarts树形图展开和收缩
展开效果:

二、实现代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;overflow:-Scroll;overflow-y:hidden">
<div id="content" style="width: 100%; margin: 20 0;align:center">
<label class="col-sm-2 control-label">展开/收缩</label>
<button id="btn_change" class="btn btn-white" type="button"> 切换 </button>
</div>
<div id="container" style="height: 100%"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>;
<script src="/static/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.get("{% url 'project_chart_json' %}" + "?pro_id={{ pro_id }}" , function (data) {
myChart.hideLoading();

echarts.util.each(data.children, function (datum, index) {
    datum.collapsed = false;
});

myChart.setOption(option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [
        {
            type: 'tree',

            data: [data],

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

            symbolSize: 9,

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

            leaves: {
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                }
            },

            initialTreeDepth: -1,
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 600
        }
    ]
});

});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}

$('#btn_change').click(function(){

var op = myChart.getOption();
if(op.series[0].initialTreeDepth >= 0){
  op.series[0].initialTreeDepth = -1 
}else{
  op.series[0].initialTreeDepth = 1
}

if (op && typeof op === "object") {
    myChart.setOption(op, true);
}

});
</script>
</body>
</html>

官方参考文档：
https://echarts.apache.org/zh/option.html#series-tree.initialTreeDepth