echarts绘制关系图 .html

ECharts是一个强大的JavaScript图表库，可以用于创建各种复杂的图表，包括关系图。在HTML文件中绘制关系图，通常会结合ECharts的基本配置项和数据结构。以下是一个简单的步骤：

1. 引入ECharts库：

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

2. 创建一个SVG容器放置图表：

<div id="chart" style="width: 600px; height: 400px;"></div>

3. JavaScript部分，初始化并设置关系图配置：

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

// 关系图的数据，示例为二维数组，每个节点表示一个对象，包含name、link等属性
var data = [
    {
        name: '节点A',
        link: ['节点B', '节点C']
    },
    {
        name: '节点B',
        link: []
    },
    {
        name: '节点C',
        link: ['节点D']
    },
    {
        name: '节点D',
        link: []
    }
];

// 设置关系图配置
var option = {
    type: 'graph',
    nodes: data.map(item => ({ name: item.name })),
    links: data.flatMap(item => item.link.map(link => ({ source: item.name, target: link }))),
    layout: 'force', // 使用力导向布局
    roam: true, // 自由漫游
    edgeSymbol: 'arrow',// 边线箭头样式
};

// 绘制图表
chart.setOption(option);