Echarts关系图特效实现

本文主要是介绍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位置能对应上。

这篇关于Echarts关系图特效实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---