Uno, logra el efecto
Efecto de encogimiento: 
Efecto de expansión:
En segundo lugar, el código de implementación
<! 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> ;
<
var myChart = echarts.init (dom);
var app = {};
opción = nulo;
myChart.showLoading ();
$ .get ("{% url 'project_chart_json'%}" + "? pro_id = {{pro_id}}", función (datos) {
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 (opción && 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>
Documento de referencia oficial:
https://echarts.apache.org/zh/option.html#series-tree.initialTreeDepth