echarts使用版本
v4版本
需求
當(dāng)數(shù)據(jù)量比較大時(shí)吏恭，tree的子節(jié)點(diǎn)會(huì)擠在一起，這不是產(chǎn)品想要的效果
產(chǎn)品期望點(diǎn)擊某一子節(jié)點(diǎn)時(shí)注整，其他同級(jí)節(jié)點(diǎn)自動(dòng)收起军熏，效果如下
echarts官方文檔并沒(méi)有提供類(lèi)似的配置，只提供了expandAndCollapse实蔽，但是無(wú)法達(dá)到我們的目的荡碾，只能去讀echarts tree的源碼了。
源碼簡(jiǎn)單解讀
treeAction.js局装，重點(diǎn)關(guān)注isExpand坛吁，每次點(diǎn)擊操作后會(huì)觸發(fā)node.isExpand的改變，從而達(dá)到展開(kāi)收起的效果铐尚，這樣的話我們就可以搞點(diǎn)小動(dòng)作
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
// 此處省略配置信息
通過(guò)myChart._chartsViews[0]._data.tree._nodes可以拿到節(jié)點(diǎn)組信息拨脉，然后迅速在click事件中對(duì)node的isExpand進(jìn)行了修改，迫不及待刷新瀏覽器嘗試宣增，然并卵玫膀，并沒(méi)有起作用，繼續(xù)讀源碼查找原因爹脾，閱讀treeView.js發(fā)現(xiàn)問(wèn)題出在了這里帖旨，click事件在render方法調(diào)用之后，那么我們就要想辦法在render等函數(shù)調(diào)用之前對(duì)nodes進(jìn)行修改灵妨，于是改用mousedown事件進(jìn)行修改解阅，通過(guò)斷點(diǎn)調(diào)試，發(fā)現(xiàn)mousedown事件在render等一系列函數(shù)調(diào)用之前泌霍。
假如想在初始加載時(shí)控制打開(kāi)哪些節(jié)點(diǎn)货抄，可以通過(guò)設(shè)置data中的collapsed屬性來(lái)實(shí)現(xiàn)
假如想要?jiǎng)討B(tài)控制tree的高度和寬度可以通過(guò)myChart._chartsViews[0]._data._graphicEls個(gè)數(shù)以及myChart._chartsViews[0]._data.tree._nodes中每個(gè)節(jié)點(diǎn)的isExpand來(lái)判斷當(dāng)前顯示的層級(jí)個(gè)數(shù)動(dòng)態(tài)計(jì)算所需高度和寬度
簡(jiǎn)單DEMO
如果demo無(wú)法運(yùn)行，應(yīng)該是是echarts的cdn失效了朱转，大家去echarts官網(wǎng)找最新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>
