绘制一个echarts关系图
时间: 2023-05-16 14:07:13 浏览: 123
好的,您可以使用以下代码来绘制一个基本的 echarts 关系图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 关系图</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个容器来放置图表 -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 配置图表
var option = {
title: {
text: '关系图'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: [
{
name: '节点1',
x: 300,
y: 150
},
{
name: '节点2',
x: 800,
y: 150
},
{
name: '节点3',
x: 550,
y: 500
},
{
name: '节点4',
x: 300,
y: 500
}
],
// 关系边
links: [
{
source: '节点1',
target: '节点2',
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
},
{
source: '节点2',
target: '节点3',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
},
{
source: '节点3',
target: '节点4',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
},
{
source: '节点4',
target: '节点1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
}
]
}
]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
这是一个简单的 echarts 关系图,您可以根据自己的需求进行修改和扩展。
阅读全文