echarts-关系图（自己指向自己）

echarts-关系图（自己指向自己）

效果图如下

代码如下

var res = {
  MSG: 'SUCCESS',
  RSP: {
    ATTACH: null,
    DATA: {
      locus: [
        {
          stop: 587000,
          from: '提单人汗克孜.色依提',
          to: '新疆IT支撑团队思特奇维护'
        },
        {
          stop: 192000,
          from: '新疆IT支撑团队思特奇维护',
          to: '新疆IT支撑团队思特奇维护'
        },
        {
          stop: 192000,
          from: '新疆IT支撑团队汗克孜.色依提',
          to: '新疆IT支撑团队汗克孜.色依提'
        },
        {
          stop: 80149000,
          from: '新疆IT支撑团队思特奇维护',
          to: '新疆IT支撑团队汗克孜.色依提'
        }
      ]
    },
    RSP_CODE: '200',
    RSP_DESC: 'SUCCESS'
  },
  STATUS: '0000',
  TXID: ''
};

let data = res.RSP.DATA.locus;
let arr = [];
let cons = 0;
let cf = [];
let cfIndex = 0;
for (let i = 0; i < data.length; i++) {
  if (data[i].from == data[i].to) {
    cf.push({ name: strs(data[i].from), index: i });
    data[i].to = (data[i].to + ' ');
  }
  arr.push({
    name: strs(data[i].from),
    value: [0, 0]
  });
  arr.push({
    name: strs(data[i].to),
    value: [0, 0]
  });
}
console.log(data);
function shiftTimeStamp(time) {
  // time /= 1000; 如果传进来的是 毫秒 形式，则在这里除1000将其转为 秒 形式
  function f_m_dispose(min, sec) {
    // 分秒处理函数
    if (min < 10 && sec < 10) {
      return '0' + min + ' mins ' + '0' + sec + ' s '; // 如果分和秒都小于10，则前面都加入0
    } else if (min < 10 && sec >= 10) {
      return '0' + min + ' mins ' + sec + ' s '; // 如果分小于10，秒大于10，则给分前面加0
    } else if (min >= 10 && sec < 10) {
      return min + ' mins ' + '0' + sec + ' s '; // 如果分大于10，秒小于10，则给秒前面加0
    } else {
      return min + ' mins ' + sec + ' s '; // 如果分秒都大于10，则直接return
    }
  }
  let hour = Number.parseInt(time / 3600); // 获取总的小时
  let min = Number.parseInt((time - hour * 3600) / 60); // 获取总分钟
  let sec = time - hour * 3600 - min * 60; // 减去总 分 后剩余的分秒数
  if (!hour) {
    // 小时为0时
    return f_m_dispose(min, sec);
  } else {
    // 小时大于0的处理
    if (!min) {
      // 分为0时
      // 如果秒也小于10，则返回 例1:00:07
      return sec < 10
        ? hour + ' h ' + '00' + ' mins 0' + sec + ' s '
        : hour + ' h ' + '00' + ' mins ' + sec + ' s ';
    } else {
      // 有分钟时的处理
      return hour + ' h ' + f_m_dispose(min, sec); // 返回总小时加上处理好的分秒数
    }
  }
}
var obj = {};
let datas = arr.reduce(function (item, next) {
  obj[next.name] ? '' : (obj[next.name] = true && item.push(next));
  return item;
}, []);
for (let i = 0; i < datas.length; i++) {
  // for (var j = 0; j < cf.length; j++) {
  //   if (datas[i].name == cf[j]) {
  //     datas[i].itemStyle = {
  //       normal: {
  //         color: 'red'
  //       }
  //     };
  //   }
  // }
  cons += 100;
  datas[i].value = [cons, 0];
}

function strs(value) {
  var ret = ''; //拼接加\n返回的类目项
  var maxLength = 5; //每项显示文字个数
  var valLength = value.length; //X轴类目项的文字个数
  var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
  if (rowN > 1) {
    //如果类目项的文字大于5,
    for (var i = 0; i < rowN; i++) {
      var temp = ''; //每次截取的字符串
      var start = i * maxLength; //开始截取的位置
      var end = start + maxLength; //结束截取的位置
      //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
      temp = value.substring(start, end) + '\n';
      ret += temp; //凭借最终的字符串
    }
    return ret;
  } else {
    return value;
  }
}
let LinksData = [];
for (let i = 0; i < data.length; i++) {
  LinksData.push({
    stop: shiftTimeStamp(data[i].stop / 1000),
    source: strs(data[i].from),
    target: strs(data[i].to),
    lineStyle: {
      normal: {
        curveness: 0.2
      }
    }
  });
}
option = {
  tooltip: {
    formatter: function (params) {
      if (params.dataType == 'edge') {
        let tip = '';
        tip = params.name + '<br>' + '停留时间: ' + params.data.stop;
        return tip;
      }
    }
  },
  grid: {
    top: 120,
    bottom: 120
  },
  yAxis: [
    {
      type: 'category',
      boundaryGap: false,
      show: false
      //这里按照同一工序有多个子工序的最大值取个数
    }
  ],
  xAxis: {
    type: 'category',
    show: false,
    data: []
  },
  series: [
    {
      type: 'graph',
      layout: 'none',
      coordinateSystem: 'cartesian2d',
      symbolKeepAspect: false,
      symbolSize: 70,
      //edgeSymbolSize: 50,
      roam: true,
      symbol: 'roundRect',
      label: {
        normal: {
          show: true
        }
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 15],
      data: datas,
      links: LinksData,
      lineStyle: {
        normal: {
          color: '#2f4554'
        }
      }
    }
  ]
};