Echarts关系图特效实现

全屏展示

鼠标经过高亮展示

点击其他节点，加载其他节点数据

这个主要利用了echarts的关系图配置。因为需要将相同类型的数据放一起，所以不能实用引力图，引力图虽然效果比较好，而且有动画，但是无法根据同一类型的东西在一个方向排列。

所以需要自己计算位置关系。而且鼠标经过节点有涟漪特效，使用引力图，因为有动画，涟漪特效定位有些不准(后面将涟漪特效实现)。

1  不采用布局方案：layout: "none"

2 固定中间节点位置：其他位置根据公式计算，按照圆形分布。

// 角度转弧度
const transformToRadians = (degrees) => degrees * (Math.PI / 180);

/**
 * @description: 根据已知角度算出每个元素的具体位置
 * @param {number} circleRadius 半径
 * @param {number} circlePointX 中心点x坐标
 * @param {number} circlePointY 中心点y坐标
 * @param {number} count 个数
 * @param {number}  angleStart 起始角度
 * @param {number} circle 多的圆
 */
export const changeItemAngle = (
  circleRadius,
  circlePointX,
  circlePointY,
  count,
  angleStart,
  circle,
  nodes
) => {
  // 划分的角度
  const angle = Math.floor(circle / count);

  nodes = nodes.map((item, index) => {
    // 转为 0 - 360 度
    const itemAngle = (angle * (index + 1) + angleStart) % 360;
    // 弧度
    const itemRadians = transformToRadians(itemAngle);
    const clientWidth = 10;
    const clientHeight = 10;

    let top = circleRadius * Math.sin(itemRadians) + circlePointY;
    let left = circleRadius * Math.cos(itemRadians) + circlePointX;

    // 为了让子节点紧贴圆内壁
    if (itemAngle < 90 && itemAngle >= 0) {
      top -= clientHeight;
      left -= clientWidth;
    } else if (itemAngle >= 90 && itemAngle < 180) {
      top -= clientHeight;
    } else if (itemAngle >= 270 && itemAngle < 360) {
      left -= clientWidth;
    }
    return item.x
      ? item
      : {
          ...item,
          x: left,
          y: top
        };
  });
  return nodes;
};

2 label效果实现：

将默认的tooltips关闭，设置节点为圆形，并且通过labelFormate将label设置到圆形外面,配合rich通过格式化来设置label位置。以及给不同类型的节点设置不同的效果。

symbol: "circle",
roam: true,
zoom: 0.8,
// 设置选中模式为单选
selectedMode: "single",

...

label: {
	show: true,
	formatter: customLabelFormatter,
	rich: {
	a: {
	color: "#888888",
	padding: [55, 4, 4, 4],
	fontSize: 12
	},
	b: {
	color: "#888888",
	padding: [75, 4, 4, 4],
	fontSize: 12
	}
	}
},
edgeSymbol: ["none"],
edgeSymbolSize: [50, 50],

3 数据关系逻辑。初始化，只需要将中心点确认出来，设置位置为画布中心，其他节点数据按照接口数据依次组织为节点，然后便利节点，通过设置中心点的id和其他节点的id关联节点连线。当点击节点后，已点击的节点为中心，再次重复以上逻辑，就可以实现数据的加载和点击后数据重新加载。

4 涟漪特效：涟漪特效其实是利用了css和多个dom组合，再节点点击时获取当前节点位置，改变dom节点位置到点击位置实现的。点击节点的时候我们可以获取到节点所在位置。

const position = params.event.target.transform;

以上就是获取节点位置的方法，不过你的echarts和dom当前位置你要确定，如果你把echarts定位了，可能位置关系对不上，需要自己先确定关系。让这个坐标位置和你的dom位置能对应上。