echarts 关系图 自己构建一个关系图

ECharts是一个强大的JavaScript图表库，用于创建丰富的数据可视化图表。如果你想使用ECharts构建一个关系图（也称为网络图或树状图），你可以按照以下步骤操作：

1. **准备数据**：首先，你需要有一份描述节点之间关系的数据，通常包括节点ID、节点名称以及边的源和目标。

[
  {
    "name": "节点A",
    "id": "node-A",
    links: [{ source: "node-A", target: "node-B" }]
  },
  {
    "name": "节点B",
    "id": "node-B",
    links: [{ source: "node-B", target: "node-C" }]
  }
]

2. **引入ECharts库**：在HTML文件中引入ECharts的CDN资源或本地版本。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

3. **初始化图表**：使用ECharts API 创建一个新的关系图实例，并指定容器ID。

var chart = echarts.init(document.getElementById('relationship-chart'));

4. **配置选项**：设置图表的主题、节点样式、边线样式等，比如：

var option = {
  type: 'graph',
  layout: {
    force: { // 强力布局
      enabled: true,
      animationDurationUpdate: 750 // 动画时间
    }
  },
  nodes: [...], // 数据数组
  edges: [...],
  edgeSymbol: ['circle', 'arrow'], // 边的形状和箭头
  nodeLabel: {
    emphasis: {
      show: true
    }
  }
};

5. **渲染图表**：

chart.setOption(option);

6. **交互事件**（可选）：添加鼠标悬停、点击等事件处理，以便于用户交互。

完整示例见官方文档：http://echarts.baidu.com/examples.html#network