Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果

*使用Echarts5.在关系图谱中实现节点拖拽和高亮

1. 导入必要的库

在您的HTML文件中，引用Echarts库和必需的模块：

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

2. 创建关系图谱

const myChart = echarts.init(document.getElementById('main'));

const option = {
  series: [
    {
      type: 'graph',
      layout: 'none',
      data: nodes,
      links: links,
      roam: true, // 允许拖拽节点
      focusNodeAdjacency: true, // 鼠标悬浮时高亮相邻节点
    },
  ],
};

myChart.setOption(option);

3. 启用节点拖拽

要在关系图谱中启用节点拖拽，您需要在series选项中设置draggable属性为true：

series: [
  {
    type: 'graph',
    layout: 'none',
    data: nodes,
    links: links,
    roam: true, // 允许拖拽节点
    draggable: true, // 允许节点拖拽
    focusNodeAdjacency: true, // 鼠标悬浮时高亮相邻节点
  },
],

4. 添加点击节点高亮效果

要添加点击节点的高亮效果，您需要在series选项中设置emphasis属性：

series: [
  {
    type: 'graph',
    layout: 'none',
    data: nodes,
    links: links,
    roam: true, // 允许拖拽节点
    draggable: true, // 允许节点拖拽
    emphasis: {
      itemStyle: {
        borderColor: '#000',
        borderWidth: 2,
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
      },
    },
  },
],

5. 丰富您的关系图谱

为了让您的关系图谱更加丰富和信息丰富，可以考虑使用以下技巧：

• 添加标签： 使用label属性为节点添加标签，以帮助用户识别它们。
• 调整节点和边样式： 使用itemStyle和lineStyle属性自定义节点和边的外观。
• 添加交互式提示： 使用tooltip选项添加交互式提示，以在用户悬停节点或边时显示更多信息。
• 使用力导向布局： 使用force布局算法创建更自然的节点布局。

6. 结论

通过遵循本指南中的步骤，您可以在Echarts5.*关系图谱中轻松添加节点拖拽和点击节点高亮效果。这些交互式功能可以使您的图表更加用户友好和信息丰富，帮助您更有效地传达数据。

常见问题解答

1. 如何调整节点和边的颜色？

• 使用itemStyle和lineStyle属性的color属性设置节点和边的颜色。

2. 如何使节点可缩放？

• 在series选项中设置scaleLimit属性以启用缩放。

3. 如何在节点上显示图像？

• 使用itemStyle属性的image属性指定图像URL。

4. 如何使用力导向布局？

• 在series选项中设置layout属性为force以启用力导向布局。

5. 如何添加自定义交互？

• 使用Echarts的on方法添加自定义交互，例如单击或拖动事件。