全屏展示
鼠标经过高亮展示
点击其他节点，加载其他节点数据
这个主要利用了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位置能对应上。
