Echarts绘制关系图 .html

ECharts是一个强大的JavaScript数据可视化库，可以用于创建各种图表，包括关系图（也称为网络图）。在ECharts中，绘制关系图通常使用`sankey`或`graph`组件。以下是基本步骤：

1. 引入ECharts库和需要的关系图模块：首先，在HTML文件中引入ECharts的CDN链接。

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

2. 创建图表容器：在HTML中添加一个SVG元素作为ECharts的绘图区域。

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

3. 编写JavaScript代码初始化并配置关系图：

// 获取图表元素
var chart = echarts.init(document.getElementById('chartContainer'));

// 配置选项
var option = {
    type: 'sankey', // 或者 'graph'，取决于你的需求
    // 数据配置，包括节点、边等信息
    nodes: [...],
    links: [...],
    // 其他配置项，如标题、样式、交互等
    title: {
        text: '关系图'
    },
    label: {
        normal: {
            show: false
        }
    },
    // 更详细的配置，请参考官方文档
};

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