Echarts关系图特效实现

2024-08-29 12:44
文章标签 实现 关系 特效 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关系图特效实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1117897

相关文章

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho