echarts绘制关系图 (.html)

ECharts是一款由百度开源的JavaScript图表库，它可以方便地在HTML页面上绘制各种类型的图表，包括关系图。关系图通常用于展示节点之间的连接，比如社交网络、组织架构等。在ECharts中，你可以通过`graph`模块来创建这种图形。

首先，你需要在HTML文件中引入ECharts的库和相应的配置文件。例如：

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

然后，在JavaScript部分，设置数据结构，包括节点（nodes）和边（links），并初始化图表实例：

// 数据示例
const nodes = [
  { name: '节点A', value: 80 },
  { name: '节点B', value: 70 },
  { name: '节点C', value: 90 }
];

const links = [
  { source: '节点A', target: '节点B' },
  { source: '节点A', target: '节点C' },
  { source: '节点B', target: '节点C' }
];

// 初始化图表
let chart;
chart = echarts.init(document.getElementById('main'));

// 关系图配置
const option = {
  type: 'graph',
  data: {
    nodes,
    edges: links
  },
  layout: 'force', // 使用力导向布局
  roam: true,     // 节点可以自由移动
  edgeSymbol: ['none'], // 隐藏默认边线样式
  categories: [], // 如果有颜色分组，需要设置类别
  // 更多详细配置...
};

// 设置图表选项并渲染
chart.setOption(option);

最后，记得给图表容器添加一个id，如`<div id="main" style="width: 600px;height:400px;"></div>`。