当我单击特定节点并绘制通往其子叶的路径时，是否有用于着色或突出显示树枝的 ECharts 选项？

Question

在阅读了 ECharts 文档并查看了示例之后，当我单击特定节点并绘制通往其子叶的路径时，我没有找到任何允许着色或突出显示树枝的内容。

基本上，我正在尝试做这样的 ECharts 树示例：

Answer 1

理论上是可以的，但是我没有时间练习。总的来说，我在接下来的步骤中的想法：订阅click符号的监听事件，见 events。获取当前（点击）系列并摆脱另一个系列以排除父母，可以使用instance.getModel().getSeries()或instance.getModel().eachSeries(...)在它之后，我们有唯一的子节点。现在您可以更改（使用instance.setOption({...})）子叶的 lineStyle 并将其涂成黑色。如果不成功，我稍后再试。更新我做了你想要的，但是代码很脏而且不容易学习，抱歉我很着急。如果您有任何问题，请告诉我。var container = document.getElementById('main');var chart = echarts.init(container);var data = {&nbsp; name: "node 1",&nbsp; children: [{&nbsp; &nbsp; name: "node 1.1",&nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; name: "node 1.1.1",&nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; name: "node 1.1.1.1",&nbsp; &nbsp; &nbsp; &nbsp; value: 721&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; name: "node 1.1.2",&nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; name: "node 1.1.2.1",&nbsp; &nbsp; &nbsp; &nbsp; value: 727,&nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "node 1.1.2.1.1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "node 1.1.2.1.1.1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: 727&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "node 1.1.2.1.2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "node 1.1.2.1.2.1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: 727&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; name: "node 1.1.3",&nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; name: "node 1.1.3.1",&nbsp; &nbsp; &nbsp; &nbsp; value: 725&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }]&nbsp; }]};var option = {&nbsp; tooltip: {&nbsp; &nbsp; trigger: 'item',&nbsp; &nbsp; triggerOn: 'mousemove'&nbsp; },&nbsp; series: [{&nbsp; &nbsp; type: 'tree',&nbsp; &nbsp; id: 0,&nbsp; &nbsp; name: 'tree1',&nbsp; &nbsp; data: [data],&nbsp; &nbsp; top: '10%',&nbsp; &nbsp; left: '8%',&nbsp; &nbsp; bottom: '22%',&nbsp; &nbsp; right: '20%',&nbsp; &nbsp; symbolSize: 7,&nbsp; &nbsp; edgeShape: 'curve',&nbsp; &nbsp; edgeForkPosition: '10%',&nbsp; &nbsp; initialTreeDepth: 5,&nbsp; &nbsp; lineStyle: {&nbsp; &nbsp; &nbsp; width: 3,&nbsp; &nbsp; &nbsp; curveness: 0.3&nbsp; &nbsp; },&nbsp; &nbsp; label: {&nbsp; &nbsp; &nbsp; backgroundColor: '#fff',&nbsp; &nbsp; &nbsp; position: 'left',&nbsp; &nbsp; &nbsp; verticalAlign: 'middle',&nbsp; &nbsp; &nbsp; align: 'right',&nbsp; &nbsp; &nbsp; borderColor: 'red',&nbsp; &nbsp; &nbsp; borderWidth: 1,&nbsp; &nbsp; &nbsp; borderRadius: 10,&nbsp; &nbsp; &nbsp; padding: 10&nbsp; &nbsp; },&nbsp; &nbsp; leaves: {&nbsp; &nbsp; &nbsp; label: {&nbsp; &nbsp; &nbsp; &nbsp; position: 'right',&nbsp; &nbsp; &nbsp; &nbsp; verticalAlign: 'middle',&nbsp; &nbsp; &nbsp; &nbsp; align: 'left'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; expandAndCollapse: true,&nbsp; &nbsp; animation: false,&nbsp; }]};chart.setOption(option);var hoverStyle = { lineStyle: { color: 'black' }};// Traverse each node in treefunction traverse(node, callback){&nbsp; if(node.children){&nbsp; &nbsp; callback(node);&nbsp; &nbsp; node.children.forEach(subNode => traverse(subNode, callback))&nbsp; } else {&nbsp; &nbsp; callback(node)&nbsp; }}// Traverse from target nodefunction traverseFrom(opts){&nbsp; var defaults = { tree: data, nodeName: null, callback: null, skipStartNode: false };&nbsp; &nbsp; &nbsp; Object.assign(defaults, opts);&nbsp; var targetNode = null;&nbsp; // Find node for start paint&nbsp; traverse(defaults.tree, node => {&nbsp; &nbsp; if(node.name === defaults.nodeName){&nbsp; &nbsp; &nbsp; targetNode = node;&nbsp; &nbsp; }&nbsp; });&nbsp; // Find all children of found node&nbsp; traverse(targetNode, node => {&nbsp; &nbsp; if(defaults.skipStartNode && node.name === defaults.nodeName){&nbsp; &nbsp; &nbsp; // Skip first because it is start branch&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; defaults.callback(node)&nbsp; &nbsp; }&nbsp; });}// Build new config with painted nodesfunction buildSeriesConfig(nodes, style){&nbsp; var seriesConfig = echarts.util.clone(data);&nbsp; var nodes = [...nodes].flat();&nbsp; traverse(seriesConfig, node => {&nbsp; &nbsp; if(nodes.includes(node.name)){&nbsp; &nbsp; &nbsp; Object.assign(node, style);&nbsp; &nbsp; }&nbsp; });&nbsp; return seriesConfig};// General paint functionfunction paintBranch(chartInstance, nodeName){&nbsp; var nodesForPaint = [];&nbsp; var newSeries&nbsp; &nbsp; &nbsp;= null;&nbsp; var mainOption&nbsp; &nbsp; = null;&nbsp; traverseFrom({&nbsp; &nbsp; nodeName: nodeName,&nbsp; &nbsp; callback: node => nodesForPaint.push(node.name),&nbsp; &nbsp; skipStartNode: true&nbsp; });&nbsp; if(nodesForPaint){&nbsp; &nbsp; newSeries = buildSeriesConfig(nodesForPaint, hoverStyle)&nbsp; } else {&nbsp; &nbsp; throw 'Nodes for paint is not exists'&nbsp; }&nbsp; if(newSeries){&nbsp; &nbsp; chartInstance.setOption({&nbsp; &nbsp; &nbsp; series: [{ type: 'tree', id: '0', data: [newSeries] }]&nbsp; &nbsp; }, false);&nbsp; } else {&nbsp; &nbsp; throw 'New series config is not builded'&nbsp; }};function isNodeSelected(tree, nodeName){&nbsp; var status = false;&nbsp; traverseFrom({&nbsp; &nbsp; tree: tree,&nbsp; &nbsp; nodeName: nodeName,&nbsp; &nbsp; callback: node => {&nbsp; &nbsp; &nbsp; if(node.hasOwnProperty('lineStyle')) status = true;&nbsp; &nbsp; },&nbsp; &nbsp; skipStartNode: true&nbsp; })&nbsp; return status}function cleanTree(chartInstance){&nbsp; var clonedData = echarts.util.clone(data);&nbsp; chartInstance.setOption({&nbsp; &nbsp; series: [{ type: 'tree', id: '0', data: [clonedData] }]&nbsp; }, false);};chart.on('click', (e) => {&nbsp; var chartTree = chart.getOption().series[0].data[0];&nbsp; var nodeSelected = isNodeSelected(chartTree, e.name);&nbsp; if(nodeSelected){&nbsp; &nbsp; cleanTree(chart)&nbsp; } else {&nbsp; &nbsp; paintBranch(chart, e.name)&nbsp; }});<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script><div id="main" style="width: 800px;height:600px; margin: 100px"></div>