echarts使用版本

v4版本

需求

当数据量比较大时，tree的子节点会挤在一起，这不是产品想要的效果

产品期望点击某一子节点时，其他同级节点自动收起，效果如下

echarts官方文档并没有提供类似的配置，只提供了expandAndCollapse，但是无法达到我们的目的，只能去读echarts tree的源码了。

源码简单解读

treeAction.js，重点关注isExpand，每次点击操作后会触发node.isExpand的改变，从而达到展开收起的效果，这样的话我们就可以搞点小动作

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

// 此处省略配置信息

通过myChart._chartsViews[0]._data.tree._nodes可以拿到节点组信息，然后迅速在click事件中对node的isExpand进行了修改，迫不及待刷新浏览器尝试，然并卵，并没有起作用，继续读源码查找原因，阅读treeView.js发现问题出在了这里，click事件在render方法调用之后，那么我们就要想办法在render等函数调用之前对nodes进行修改，于是改用mousedown事件进行修改，通过断点调试，发现mousedown事件在render等一系列函数调用之前。

假如想在初始加载时控制打开哪些节点，可以通过设置data中的collapsed属性来实现

TreeSeries.js

假如想要动态控制tree的高度和宽度可以通过myChart._chartsViews[0]._data._graphicEls个数以及myChart._chartsViews[0]._data.tree._nodes中每个节点的isExpand来判断当前显示的层级个数动态计算所需高度和宽度

简单DEMO

如果demo无法运行，应该是是echarts的cdn失效了，大家去echarts官网找最新cdn地址替换一下script引入地址即可

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

var app = {};

var data = {

"name": "flare",

"children": [{

"name": "analytics",

"children": [{

"name": "cluster",

"children": [{

"name": "AgglomerativeCluster",

"value": 3938

}, {

"name": "CommunityStructure",

"value": 3812

}, {

"name": "HierarchicalCluster",

"value": 6714

}, {

"name": "MergeEdge",

"value": 743

}]

}, {

"name": "graph",

"children": [{

"name": "BetweennessCentrality",

"value": 3534

}, {

"name": "LinkDistance",

"value": 5731

}, {

"name": "MaxFlowMinCut",

"value": 7840

}, {

"name": "ShortestPaths",

"value": 5914

}, {

"name": "SpanningTree",

"value": 3416

}]

}, {

"name": "optimization",

"children": [{

"name": "AspectRatioBanker",

"value": 7074

}]

}]

}, {

"name": "animate",

"children": [{

"name": "Easing",

"value": 17010

}, {

"name": "FunctionSequence",

"value": 5842

}, {

"name": "interpolate",

"children": [{

"name": "ArrayInterpolator",

"value": 1983

}, {

"name": "ColorInterpolator",

"value": 2047

}, {

"name": "DateInterpolator",

"value": 1375

}, {

"name": "Interpolator",

"value": 8746

}, {

"name": "MatrixInterpolator",

"value": 2202

}, {

"name": "NumberInterpolator",

"value": 1382

}, {

"name": "ObjectInterpolator",

"value": 1629

}, {

"name": "PointInterpolator",

"value": 1675

}, {

"name": "RectangleInterpolator",

"value": 2042

}]

}, {

"name": "ISchedulable",

"value": 1041

}, {

"name": "Parallel",

"value": 5176

}, {

"name": "Pause",

"value": 449

}, {

"name": "Scheduler",

"value": 5593

}, {

"name": "Sequence",

"value": 5534

}, {

"name": "Transition",

"value": 9201

}, {

"name": "Transitioner",

"value": 19975

}, {

"name": "TransitionEvent",

"value": 1116

}, {

"name": "Tween",

"value": 6006

}]

}]

};

option = null;

myChart.setOption(option = {

tooltip: {

trigger: 'item',

triggerOn: 'mousemove'

},

series: [{

type: 'tree',

data: [data],

left: '2%',

right: '2%',

top: '8%',

bottom: '20%',

symbol: 'emptyCircle',

orient: 'vertical',

expandAndCollapse: true,

label: {

normal: {

position: 'top',

rotate: -90,

verticalAlign: 'middle',

align: 'right',

fontSize: 9

}

},

leaves: {

label: {

normal: {

position: 'bottom',

rotate: -90,

verticalAlign: 'middle',

align: 'left'

}

}

},

animationDurationUpdate: 750

}]

});;

if (option && typeof option === "object") {

myChart.setOption(option, true);

myChart.on('mousedown', (e) => {

const name = e.data.name;

const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item => {

return item.name === name;

});

const depth = curNode.depth;

const curIsExpand = curNode.isExpand;

myChart._chartsViews[0]._data.tree._nodes.forEach((item, index) => {

if (item.depth === depth && item.name !== name && !curIsExpand) {

item.isExpand = false;

}

});

})

}