Echarts如何实现树状图层级展示

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于创建各种图表，包括树状图。要在 ECharts 中实现树状图的层级展示，你需要遵循以下步骤：

1. 引入 ECharts 库

首先，确保你已经在项目中引入了 ECharts 库。你可以通过 CDN 或者下载到本地的方式引入。例如，通过 CDN 引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 准备数据

为了创建树状图，你需要准备一个包含层级关系的数据对象。例如：

const data = {
  name: '根节点',
  children: [
    {
      name: '子节点1',
      children: [
        {
          name: '孙节点1',
        },
        {
          name: '孙节点2',
        },
      ],
    },
    {
      name: '子节点2',
    },
  ],
};

3. 配置 ECharts 选项

创建一个 ECharts 实例，并为其配置树状图相关的选项。例如：

const option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove',
  },
  series: [
    {
      type: 'tree',
      data: [data],
      top: '1%',
      left: '7%',
      bottom: '1%',
      right: '20%',
      symbolSize: 7,
      label: {
        position: 'left',
        verticalAlign: 'middle',
        align: 'right',
        fontSize: 9,
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left',
        },
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750,
    },
  ],
};

4. 初始化 ECharts 实例并设置配置

创建一个 DOM 元素作为图表的容器，并使用 echarts.init() 方法初始化 ECharts 实例。然后，使用 setOption() 方法设置图表的配置。

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

5. 添加样式

为了让图表看起来更美观，你可以为其添加一些 CSS 样式。例如：

#chart {
  width: 100%;
  height: 600px;
}

现在，你应该可以在页面上看到一个具有层级展示的树状图了。你可以根据需要调整 ECharts 配置中的选项来自定义图表的外观和行为。更多关于 ECharts 树状图的配置选项，你可以查阅官方文档：https://echarts.apache.org/zh/option.html#series-tree