起因
项目使用到这个图谱，想加个图例。但是这个关系图却不像折线图、柱状图等这么容易。我以为像下面这样设置就行了,但是不止这样
legend: {
orient: 'vertical',
left: 'left',
data: ['成功', '失败']
},
解决
还需要配置这两个：
series-graph. categories
节点分类的类目，可选。
如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
series-graph.categories.name
类目名称，用于和 legend 对应以及格式化 tooltip 的内容。
series-graph.data.category
数据项所在类目的 index。
以下是我的配置
const option = {
legend: {
orient: 'vertical',
left: 'left',
data: ['成功', '失败']
},
backgroundColor: '#fff',
tooltip: {},
color: ['#2aa52a', '#f9e264'],
animationDurationUpdate: (idx: any) => {
// 越往后的数据延迟越大
return idx * 100;
},
animationEasingUpdate: 'bounceIn',
series: [{
type: 'graph',
layout: 'force',
force: {
repulsion: 60,
edgeLength: 10
},
roam: true,
categories: [
{
name: '成功',
itemStyle: {
color: '#2aa52a'
}
}, {
name: '失败',
itemStyle: {
color: '#f9e264'
}
}
],
label: {
normal: {
show: true
}
},
data: [
{
name: xx,
id: `xxx, // id必须不一样，如果没有id,会默认以name来作id的作用，name重复就会报错
category: 0,
itemStyle: {
...
}
}, {
name: xx,
id: `xxx,
category: 1,
itemStyle: {
...
}
}
]
};
效果如下：这样可以通过图例来显示隐藏响应类别了
iShot2021-04-23 00.53.01.png
