关于树视图，树视图是否可以具有点击功能

Question

请问是否可以在ECharts树状视图的叶子上自定义点击功能？我查看了文档，但找不到任何内容。

如图所示，箭头指向的节点是我希望具有点击功能的地方

sample tree img

Answer 1

请具体说明树叶是什么意思？从技术上讲，除了第一个节点之外的任何节点都是叶子。

如果您需要处理特定节点上的点击，那么在处理事件之前，您需要按名称严格检查等效目标节点。

// Params object that will passed to our event listener looks like

{
  // ...
  componentIndex: 0,
  componentSubType: "tree",
  componentType: "series",
  data: {
    name: "MergeEdge", // <-------- our target clicked node 
    value: 743
  },
  // ...
}

// Handle click event
myChart.on('click', function(params){
  var data = params.data
  if(data.name === 'MergeEdge'){ // <-------- node name test
    // test passed
    // doing something useful
  }
});

如果您需要处理对特定节点组的点击，那么您应该整齐地命名节点。假设一个图表有三层（没有根），你只需要处理来自第二层的点击。

让我们准备数据，使命名的同一级别的节点以相似的方式命名：

data: [{
  "name": "root",
  "children": [{
    "name": "node_first_level_01",
    "children": [{
        "name": "node_second_level_01", // <-------- this
        "children": [{
          "name": "node_third_level_01",
          "value": 3938
        }]
      },
      {
        "name": "node_second_level_02", // <-------- this
        "children": [{
          "name": "node_third_level_02",
          "value": 3938,
        }]
      },
      {
        "name": "node_second_level_03", // <-------- this
        "children": [{
          "name": "node_third_level_03",
          "value": 3938,
        }]
      }
    ]
  }]
}],

现在使用第一个示例中的函数，而不是严格检查，我们将检查是否符合正则表达式：

// Handle click event
myChart.on('click', function(params){
  var data = params.data
  var rule = /\w+second\w+/gm; // <-------- regex rule
  if(rule.test(data.name)){    // <-------- test name
    // test passed
    // doing something useful
  }
});

关于树视图，树视图是否可以具有点击功能

Regarding tree view, is it possible to have an on click function for the tree view

javascript

echarts