单击特定节点并绘制一条到达其子叶的路径时，是否有ECharts选项可用于着色或突出显示树枝? [英] Is there an ECharts option for coloring or highlight tree branch when I clicked a specific node and draw a path up to their children leaves?
问题描述
在阅读ECharts文档并查看示例之后，当我单击特定节点并绘制一条到达其子叶的路径时，我没有发现任何可以着色或突出显示树枝的东西.
After reading the ECharts documentation and looking at examples, I haven't found anything that would allow coloring or highlight tree branch when I clicked a specific node and draw a path up to their children leaves.
基本上，我正在尝试执行以下ECharts树示例:
Basically, I'm trying to do something like this ECharts tree example:
推荐答案
从理论上讲是可行的，但我没有时间练习.总的来说，我下一步的想法是:
It is theoretically possible, but I did not have time to practice. In general my thought in the next steps:
-
订阅以侦听符号的
click事件，获取当前(点击的)系列并摆脱另一个排除父母的系列，这可以通过instance.getModel().getSeries()或instance.getModel来完成().eachSeries(...)Get current (clicked) series and get rid for another series for exclude parents, it's can be done with
instance.getModel().getSeries()orinstance.getModel().eachSeries(...)在这之后，我们有了唯一的子节点.现在，您可以更改(使用
instance.setOption({...}))子叶的lineStyle和After it we have the only children nodes. Now you can change (with
instance.setOption({...})) children leaves' lineStyle and paint it black.如果您没有成功，我会稍后再试.
If you do not succeed, I'll try later.
更新
我满足了您的要求，但是代码很脏，不易学习，对不起，我很着急.让我知道您是否有任何疑问.
I made what you wanted but code is dirty and not easy for learn, sorry I was hurry. Let me know if you have any question.
var container = document.getElementById('main'); var chart = echarts.init(container); var data = { name: "node 1", children: [{ name: "node 1.1", children: [{ name: "node 1.1.1", children: [{ name: "node 1.1.1.1", value: 721 }] }, { name: "node 1.1.2", children: [{ name: "node 1.1.2.1", value: 727, children: [{ name: "node 1.1.2.1.1", children: [{ name: "node 1.1.2.1.1.1", value: 727 }] }, { name: "node 1.1.2.1.2", children: [{ name: "node 1.1.2.1.2.1", value: 727 }] }] }] }, { name: "node 1.1.3", children: [{ name: "node 1.1.3.1", value: 725 }] }] }] }; var option = { tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [{ type: 'tree', id: 0, name: 'tree1', data: [data], top: '10%', left: '8%', bottom: '22%', right: '20%', symbolSize: 7, edgeShape: 'curve', edgeForkPosition: '10%', initialTreeDepth: 5, lineStyle: { width: 3, curveness: 0.3 }, label: { backgroundColor: '#fff', position: 'left', verticalAlign: 'middle', align: 'right', borderColor: 'red', borderWidth: 1, borderRadius: 10, padding: 10 }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left' } }, expandAndCollapse: true, animation: false, }] }; chart.setOption(option); var hoverStyle = { lineStyle: { color: 'black' }}; // Traverse each node in tree function traverse(node, callback){ if(node.children){ callback(node); node.children.forEach(subNode => traverse(subNode, callback)) } else { callback(node) } } // Traverse from target node function traverseFrom(opts){ var defaults = { tree: data, nodeName: null, callback: null, skipStartNode: false }; Object.assign(defaults, opts); var targetNode = null; // Find node for start paint traverse(defaults.tree, node => { if(node.name === defaults.nodeName){ targetNode = node; } }); // Find all children of found node traverse(targetNode, node => { if(defaults.skipStartNode && node.name === defaults.nodeName){ // Skip first because it is start branch } else { defaults.callback(node) } }); } // Build new config with painted nodes function buildSeriesConfig(nodes, style){ var seriesConfig = echarts.util.clone(data); var nodes = [...nodes].flat(); traverse(seriesConfig, node => { if(nodes.includes(node.name)){ Object.assign(node, style); } }); return seriesConfig }; // General paint function function paintBranch(chartInstance, nodeName){ var nodesForPaint = []; var newSeries = null; var mainOption = null; traverseFrom({ nodeName: nodeName, callback: node => nodesForPaint.push(node.name), skipStartNode: true }); if(nodesForPaint){ newSeries = buildSeriesConfig(nodesForPaint, hoverStyle) } else { throw 'Nodes for paint is not exists' } if(newSeries){ chartInstance.setOption({ series: [{ type: 'tree', id: '0', data: [newSeries] }] }, false); } else { throw 'New series config is not builded' } }; function isNodeSelected(tree, nodeName){ var status = false; traverseFrom({ tree: tree, nodeName: nodeName, callback: node => { if(node.hasOwnProperty('lineStyle')) status = true; }, skipStartNode: true }) return status } function cleanTree(chartInstance){ var clonedData = echarts.util.clone(data); chartInstance.setOption({ series: [{ type: 'tree', id: '0', data: [clonedData] }] }, false); }; chart.on('click', (e) => { var chartTree = chart.getOption().series[0].data[0]; var nodeSelected = isNodeSelected(chartTree, e.name); if(nodeSelected){ cleanTree(chart) } else { paintBranch(chart, e.name) } });<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>这篇关于单击特定节点并绘制一条到达其子叶的路径时，是否有ECharts选项可用于着色或突出显示树枝?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
