echarts绘制关系图gragh示例 (html)
时间: 2024-10-29 08:10:30 浏览: 14
ECharts是一个强大的JavaScript数据可视化库,它可以用来创建各种图表,包括关系图。关系图通常用于展示节点之间的连接,例如社交网络、组织架构等。下面是一个简单的HTML示例,演示如何使用ECharts绘制关系图:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts 关系图示例</title>
<!-- 引入 ECharts 主文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="graph" style="width: 600px;height:400px;"></div>
<script>
// 数据,可以是JSON格式,每个节点是一个对象,包含id和links属性
var data = {
nodes: [
{ id: 'A', label: '节点A' },
{ id: 'B', label: '节点B' },
{ id: 'C', label: '节点C' }
],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'A', target: 'C' }
]
};
// 初始化图表
var chart = echarts.init(document.getElementById('graph'));
// 设置图表配置项
var option = {
type: 'graph',
data: data,
layout: {
// 设置布局算法
type: 'dagre'
},
categories: {
// 可视化节点的类别(如果有的话)
},
edges: {
linestyle: { type: 'curve' } // 自定义边线样式
},
// 更多配置...
};
// 渲染图表
chart.setOption(option);
</script>
</body>
</html>
```
在这个例子中,我们首先创建了一个`nodes`数组表示节点,`links`数组描述了节点间的连接。然后通过`option`配置项设置了图形的类型、数据源、布局算法以及一些基本样式。
阅读全文