近期使用echarts的关系图，繁多的配置项让人头疼。只能一直百度，但百度依旧让人摸不到头脑。
因此，基于网上的一篇”人民的名义关系图谱”关系图和实际项目需求，整理以下配置。
想配置什么，就查看更多，然后通过关键字 ctrl+f 查询一下吧～如果不能满足你的需求，就移步 echarts官网查看详细配置
❤️希望每个人都可以少走一些弯路❤️
echarts版本
3.8.5
注：所有配置均在option.series下，其他配置本文暂不涉及
Q & A
Q: 关系图中data和links分别代表什么
A: data是你的节点数据列表，links是节点关系数据列表。通俗来说，data里是一个个节点，links里说明节点之间的关系，也就是links里的每一个元素都是一条边（连接两个节点），由此构成关系图。
Q: 如何全局设置节点的属性？
A: 直接设置series下：symbolSize（节点大小），itemStyle（节点样式）
Q: 如何全局设置边的属性？
A: 直接设置series下：lineStyle（边的样式）
Q: 节点上的显示文字（节点标签）如何显示？
A: 设置label的show属性为true即可
Q: 正常和高亮状态下，标签/样式不同，如何设置?
A: 大多属性，如itemStyle/label/lineStyle/edgeLabel都有normal和emphasis两个状态，分别设置就可以。
Q: 如何设置某一节点的属性?
A: data里是节点，每一个节点的基本属性大致包括
| 属性 | 含义 |
|---|---|
| name | 数据项名称 |
| value | 数据项的值 |
| category | 数据项所在类目的index，从0开始 |
| symbol | 该类目节点标记的图形，通过这个属性你可以设置节点显示的图标，可以是echarts提供的类型，如’circle’, ‘rect’，也可以是一个链接，或者相对地址，或者base64图片 |
| symbolSize | 节点显示图标的大小 |
| itemStyle | 节点样式 |
| label | 节点标签样式 |
一般来说，我们会把symbolSize的值设置成与value有关系的值，比如symbolSize = value * 2,具体还需要看实际需求
Q: 为什么我的关系图显示就像这样子，一团糟？
A: 尝试一下设置series下的force属性1
2
3force: {
repusion: 1000 //节点间的斥力因子，默认是50
}
设置后效果图
1
2
3
4force: {
repusion: 1000, // 节点间的斥力因子，默认是50
edgeLength: [100,500] // 边的两个节点之间的距离,默认是[10,50]
}
设置后效果图如下，具体还需要根据实际需求修改值的配置
Q: 为什么我的关系图是直线型的？像这样
A: 通过设置边的线条样式lineStyle下的curveness (边的曲度）实现曲边
结合以上图片，说明一下两个官方术语
label图形上的文本标签，就是关系图上人物的名字
edgeLabel关系标签（边标签），就是两个人物之间的关系，如母女，姐妹，下属
Q: 我有一个需求，点击某个按钮，要高亮某几条指定的关系线怎么办？
A: 官网上有一个方法将指定的节点以及其所有邻接节点高亮1
2
3
4
5
6
7
8
9
10
11myChart.dispatchAction({
type: 'focusNodeAdjacency',
// 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.
seriesId: 'xxx',
seriesIndex: 0,
seriesName: 'nnn',
// 使用 dataIndex 来定位节点。
dataIndex: 12
})
根据这个方法，在源码中新增一个方法，高亮指定的边（通过边在links数组所属的下标值）
1 | myFocusEdge: function (seriesModel, ecModel, api, payload) { |
注册：1
2
3
4
5registerAction({
type: 'myFocusEdge',
event: 'myFocusEdge',
update: 'series.graph:myFocusEdge'
}, function () {});
如何调用？1
2
3
4
5
6
7
8
9myChart.dispatchAction({
type: 'myFocusEdge',
// 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.
seriesId: 'xxx',
seriesIndex: 0,
seriesName: 'nnn',
// 使用 edgeIndexs 来定位节点。
edgeIndexs: [3,4,5]
})
相应的，增加一个方法，取消高亮指定的边，调用方法基本同上（需要改一下方法名哦）1
2
3
4
5
6
7
8
9
10
11myUnFocusEdge: function (seriesModel, ecModel, api, payload) {
var graph = this._model.getData().graph;
var my_edge = payload.edgeIndexs;// 数组
my_edge.forEach(function(edge_item){
var edgeDataIndex = edge_item;
var edge = graph.getEdgeByIndex(edgeDataIndex);
if (edge) {
fadeOutItem(edge, lineOpacityPath);
}
})
}
DEMO
html
提供一个容器1
<div id="chart" style="width:800px;height:800px"></div>
js
1 | let myChart = echarts.init(document.getElementById('chart')) |