当我点击一个特定的节点并绘制一条路径到它们的子叶时，ECharts 是否有用于着色或突出显示树枝的选项？

Question

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

基本上，我正在尝试做类似这个 ECharts 树示例的事情：

Answer 1

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

订阅以收听符号 click 事件，see events。
获取当前（点击的）系列并删除另一个系列以排除 parents，可以使用 instance.getModel().getSeries() 或 instance.getModel().eachSeries(...)
在它之后我们只有 children 个节点。现在您可以更改（使用 instance.setOption({...})）children 叶子的 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>

当我点击一个特定的节点并绘制一条路径到它们的子叶时，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?

javascript

typescript

echarts

angular