echarts层级关系图

ECharts提供了层级关系图（Hierarchy），用于展现节点之间的父子关系。在ECharts中，层级关系图一般由多个节点和节点之间的连线构成，每个节点可以有自己的样式和标签，而连线可以设置不同的样式和方向，从而清晰地呈现出节点之间的层次结构。

在ECharts中，层级关系图可以通过以下步骤进行绘制：

1. 定义节点和连线的数据结构，例如：

var data = {
  name: 'node1',
  children: [
    {
      name: 'node2',
      children: [
        { name: 'node3' },
        { name: 'node4' }
      ]
    },
    { name: 'node5' }
  ]
};

var links = [
  { source: 'node1', target: 'node2' },
  { source: 'node2', target: 'node3' },
  { source: 'node2', target: 'node4' },
  { source: 'node1', target: 'node5' }
];

2. 定义层级关系图的参数和样式，例如：

option = {
  tooltip: {},
  series: [{
    type: 'treemap',
    data: [data],
    breadcrumb: { show: false },
    label: { show: true },
    upperLabel: { show: true },
    itemStyle: {
      borderColor: '#fff'
    },
    levels: [
      { color: '#555' },
      { color: '#666' },
      { color: '#777' },
      { color: '#888' }
    ]
  }]
};

3. 将层级关系图渲染到指定的DOM元素上，例如：

var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

这样就可以在页面上绘制出一个简单的层级关系图。如果需要更加复杂的样式和交互效果，可以通过ECharts提供的丰富API进行自定义配置。