点击知识图谱的主节点的关系节点，显示出关系节点的关系节点，如何在前端用echarts实现

在前端使用ECharts来实现点击知识图谱的主节点，展示出关系节点及其关系节点的过程，通常涉及以下几个步骤：

1. **数据准备**：首先需要有清晰的知识图谱数据结构，包含主节点、关系节点以及它们之间的关联信息。这可以是一个嵌套的对象数组，每个节点都包含id、label（标签）、children（子节点列表）等字段。

2. **初始化图表**：创建一个ECharts的Graph（网络图）实例，设置其配置项，如节点大小、颜色、布局策略（例如radial布局或dagre布局），同时设置鼠标交互事件监听器。

var chart = echarts.init(document.getElementById('main'));
var option = {
    graph: {
        layout: 'radial', // 使用径向布局
        edgeSymbol: 'curve', // 边线样式
        node: {
            size: [30, 30],
            style: {
                fill: '#fff'
            }
        },
        edge: {
            linestyle: {
                type: 'solid'
            }
        }
    },
    series: [{
        type: 'graph',
        data: yourDataNodes, // 初始化的数据
        edges: yourDataEdges // 关联关系的数据
    }]
};
chart.setOption(option);

3. **事件处理**：当用户点击主节点时，通过`chart.dispatchAction`发送点击事件，并获取被点击的节点及它的子节点。然后更新图表的`series.data`和`series.edges`属性，只显示相关的子节点和边。

chart.on('click', function (params) {
    var clickedNode = params.componentType === 'node' ? params.node : params.target; // 获取点击节点
    if (clickedNode) {
        var relatedNodes = getRelatedNodes(clickedNode); // 获取相关子节点
        updateChartData(relatedNodes);
    }
});

4. **数据更新**：在`updateChartData`函数中，根据新的子节点数据调整option并再次设置给图表。

5. **相关问题--:**
- ECharts有没有内置的方式来自动处理节点间的层级展示？
- 如果节点数非常多，如何优化性能防止卡顿？
- 怎样使得点击节点时能平滑地过渡到新显示的内容？