echarts绘制关系图 .html版本

ECharts是一个强大的JavaScript数据可视化库，它支持绘制各种图表，包括关系图。在HTML页面上使用ECharts绘制关系图，通常涉及到以下几个步骤：

1. **引入ECharts库**：首先，在HTML文件头部引入ECharts的CDN链接或者本地路径。

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

2. **创建图表容器**：在需要展示图表的地方，添加一个HTML元素，如`<div>`，并给它一个唯一的ID，用于后续的JavaScript操作。

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

3. **初始化图表**：在JavaScript部分，创建一个新的ECharts实例，并设置图表配置项，包括数据源、布局等。关系图通常是通过`sankey`或`graph`系列来表示。

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

// 示例配置，假设我们有一个二维数组表示节点之间的关系
var data = [
   {source: 'A', target: 'B', value: 5},
   {source: 'B', target: 'C', value: 8},
   {source: 'C', target: 'D', value: 3}
];

var option = {
   series: [{
      type: 'sankey',
      data: data,
      // 其他配置选项，例如节点样式、边线宽度等
   }]
};

chart.setOption(option);

4. **渲染图表**：最后，调用`setOption`方法将配置项应用到图表上。

chart.render();