关系图echars设置图例

起因

项目使用到这个图谱，想加个图例。但是这个关系图却不像折线图、柱状图等这么容易。我以为像下面这样设置就行了,但是不止这样

legend: {
    orient: 'vertical',
    left: 'left',
    data: ['成功', '失败']
  },

解决

还需要配置这两个：

1. series-graph. categories

节点分类的类目，可选。
如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。

series-graph.categories.name

类目名称，用于和 legend 对应以及格式化 tooltip 的内容。

2. 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