单击特定节点并绘制一条到达其子叶的路径时，是否有ECharts选项可用于着色或突出显示树枝?

问题描述

在阅读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:

1. 订阅以侦听符号的 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() or instance.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/[email protected]/dist/echarts.js"></script>
<div id="main" style="width: 800px;height:600px; margin: 100px"></div>

这篇关于单击特定节点并绘制一条到达其子叶的路径时，是否有ECharts选项可用于着色或突出显示树枝?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！