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

Question

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

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

Answer 1

理论上是可以的，但是我没有时间练习。总的来说，我在接下来的步骤中的想法：

1. 订阅以收听符号click 事件see events。

2. 获取当前（点击）系列并摆脱另一个系列以排除父母，这可以通过instance.getModel().getSeries() 或instance.getModel().eachSeries(...) 完成

3. 在它之后我们有唯一的子节点。现在您可以更改（使用instance.setOption({...})）子叶的lineStyle 和paint it black。

如果不成功，我稍后再试。

---

更新

我做了你想要的，但是代码很脏而且不容易学习，抱歉我很着急。如果您有任何问题，请告诉我。

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>