1. 基本的关系图配置：
var option = {
series: [{
type: 'graph',
layout: 'force', // 使用力引导布局
symbolSize: 50, // 节点的大小
edgeSymbol: ['circle', 'arrow'], // 边的两端的标记类型
edgeSymbolSize: [4, 10], // 边的两端的标记大小
roam: true, // 启用鼠标缩放和平移漫游
draggable: true, // 节点是否可拖拽
focusNodeAdjacency: true, // 鼠标移到节点上，突出显示节点以及节点的边和邻接节点
force: {
repulsion: 100 // 节点之间的斥力因子
},
data: [
{name: 'Node 1'},
{name: 'Node 2'},
{name: 'Node 3'},
// 更多节点数据...
],
links: [
{source: 'Node 1', target: 'Node 2'},
{source: 'Node 2', target: 'Node 3'},
// 更多边数据...
]
}]
};
在上面的例子中，通过 series 中的 type: 'graph' 配置创建了一个基本的关系图，使用力引导布局，节点和边的数据分别通过 data 和 links 数组设置。
2. 节点样式和标签配置：
var option = {
series: [{
type: 'graph',
layout: 'force',
symbolSize: 50,
label: {
show: true,
position: 'inside', // 节点标签的位置，可选值为 'inside'、'top'、'left'、'right'、'bottom'、'insideLeft' 等
formatter: '{b}', // 节点标签的格式，{b} 表示节点名称
color: '#333' // 节点标签的颜色
},
itemStyle: {
color: 'lightblue', // 节点的颜色
borderColor: '#fff', // 节点的边框颜色
borderWidth: 2 // 节点的边框宽度
},
emphasis: {
label: {
show: true,
textStyle: {
color: '#333',
fontSize: 16
}
},
itemStyle: {
color: 'orange'
}
},
data: [
{name: 'Node 1'},
{name: 'Node 2'},
{name: 'Node 3'},
// 更多节点数据...
],
links: [
{source: 'Node 1', target: 'Node 2'},
{source: 'Node 2', target: 'Node 3'},
// 更多边数据...
]
}]
};
在这个例子中，通过 label 和 itemStyle 配置节点的标签样式和节点的样式，通过 emphasis 配置节点在高亮状态下的样式。
这只是关系图的一些基本配置和操作示例，具体的使用方式可能会根据你的需求和图表类型而有所不同。你可以根据官方文档和示例进一步了解关系图的配置和使用：[ECharts 关系图](https://echarts.apache.org/zh/option.html#series-graph)。
转载请注明出处：http://www.zyzy.cn/article/detail/5087/ECharts