echarts tree控制节点的展开收起
2019-03-08 本文已影响0人
OnePiece索隆
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引入地址即可
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
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;
}
});
})
}
</script>
</body>
</html>
