echarts绘制关系图示例
时间: 2024-10-29 16:23:46 浏览: 21
echarts 路径图
5星 · 资源好评率100%
ECharts是一个强大的JavaScript图表库,用于创建各种类型的可视化,包括关系图(也称为树状图或网络图)。要在ECharts中绘制关系图,首先你需要安装echarts,并引入相关的依赖。这里是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var data = {
nodes: [
{ name: '节点A', value: 30 },
{ name: '节点B', value: 20 },
{ name: '节点C', value: 10 },
{ name: '节点D', value: 40, children: [{ name: '子节点1' }, { name: '子节点2' }] },
{ name: '节点E', value: 25 }
],
links: [
{ source: '节点A', target: '节点B' },
{ source: '节点A', target: '节点C' },
{ source: '节点B', target: '节点D' },
{ source: '节点C', target: '节点E' }
]
};
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
type: 'graph',
categories: 'nodes', // 设置数据类别为节点
data: data,
layout: {
orient: 'radial', // 使用放射布局
radius: '70%', // 规定图形半径范围
center: [50, '50%'] // 中心点位置
},
edges: {
smooth: true // 平滑线条
},
roam: false, // 禁止鼠标缩放
label: {
normal: {
position: 'center'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} ({b})"
}
});
</script>
</body>
</html>
```
在这个示例中,我们定义了一个包含节点和链接的数据结构,然后设置了ECharts的配置项,如图形类型、布局、边线样式等。运行这个HTML文件,你会看到一个基本的关系图。
阅读全文