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

Question

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

Answer 1

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

1. 订阅click符号的监听事件，见 events。

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

3. 在它之后，我们有唯一的子节点。现在您可以更改（使用instance.setOption({...})）子叶的 lineStyle 并将其涂成黑色。

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

---

更新

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

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>