echarts关系图name重复问题

1. 用echarts的showName来实现，效果如下图所示：，代码可以直接放到echarts官网测试：

    echarts官网：https://echarts.apache.org/examples/zh/index.html

   

代码如下图所示：

     xydata = [[2, 4],
              [6, 7],
              [0, 1], 
              [1, 2],
              [2, 7], 
              [1, 4], 
              [4, 5],
              [5, 6],
              [3, 4 ]];
      dataArr =[
            { id:0,"name": "name1", "category": 0 },
            {id:1, "name": "name2", "category": 1 },
            {id:2, "name": "name3", "category": 1},
            {id:3, "name": "name1", "category": 1 },
            { id:4,"name": "name2", "category": 1},
            {id:5, "name": "name3", "category": 1 },
            {id:6, "name": "name4", "category": 1 }, 
            {id:7, "name": "name5", "category": 1}]
 
        dataArr = dataArr.map((value, index) => {
            value.showName = value.name;
            value.name = index;
            return value;
        })
 
 
        var links = xydata.map(function (item, i) {
                return {
                    source:xydata[i][0],
                    target: xydata[i][1],
                };
        });
  option = {
    tooltip: {
        show: false
    },
    legend: {
        x: "center",
        data: ["family", "suite"]
    },
    animation: false,
    series: [{
        categories: [{
            name: 'family',
            itemStyle: {
                normal: {
                    color: "#009800",
                }
            }
        }, {
            name: 'suite',
            itemStyle: {
                normal: {
                    color: "#4592FF",
                }
            }
        }],
        type: 'graph',
        layout: 'force',
        symbol: "circle",
        symbolSize: 50,
        roam: true, //禁止用鼠标滚轮缩小放大效果
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [0, 10],
        // 连接线上的文字
        focusNodeAdjacency: true, //划过只显示对应关系
        // 圆圈内的文字
        label: {
            normal: {
                show: true,
                formatter: function(params){
                    return params.data.showName
                }
            }
        },
        force: {
            repulsion: 5000
        },
        data: dataArr,
        links:links
        
    }]
  }

2. 第二种方法，给每个data数据中放一个id，效果跟上图一样(推荐)

    代码如下：

     
      xydata = [[2, 4],
            [6, 7],
            [0, 1], 
            [1, 2],
            [2, 7], 
            [1, 4], 
            [4, 5],
            [5, 6],
            [3, 4 ]];
      dataArr =[
            { id:0,"name": "name1", "category": 0 },
            {id:1, "name": "name2", "category": 1 },
            {id:2, "name": "name3", "category": 1},
            {id:3, "name": "name1", "category": 1 },
            { id:4,"name": "name2", "category": 1},
            {id:5, "name": "name3", "category": 1 },
            {id:6, "name": "name4", "category": 1 }, 
            {id:7, "name": "name5", "category": 1}]
 
      var links = xydata.map(function (item, i) {
                return {
                    source:xydata[i][0],
                    target: xydata[i][1],
                };
        });
  option = {
    tooltip: {
        show: false
    },
    legend: {
        x: "center",
        data: ["family", "suite"]
    },
    animation: false,
    series: [{
        categories: [{
            name: 'family',
            itemStyle: {
                normal: {
                    color: "#009800",
                }
            }
        }, {
            name: 'suite',
            itemStyle: {
                normal: {
                    color: "#4592FF",
                }
            }
        }],
        type: 'graph',
        layout: 'force',
        symbol: "circle",
        symbolSize: 50,
        roam: true, //禁止用鼠标滚轮缩小放大效果
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [0, 10],
        // 连接线上的文字
        focusNodeAdjacency: true, //划过只显示对应关系
        // 圆圈内的文字
        label: {
            normal: {
                show: true,
                formatter: function(params){
                    return params.data.name
                }
            }
        },
        force: {
            repulsion: 5000
        },
        data: dataArr,
        links:links
        
    }]
  }

 注：在关系图中，如果是force布局，这两种方式是没有问题的，如果是layout: 'none',自己定位置的话，这两种方法就不可以了，鼠标移上去的效果就没有了。

本文参考：https://blog.youkuaiyun.com/qq_34790644/article/details/107021175