CN110502709A - 一种Echarts环形图内环展示环形数据的方法和装置 - Google Patents

Abstract

本发明提供一种Echarts环形图内环展示环形数据的方法，包括以下步骤：定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中；响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标；根据所述获取的下标获取所述鼠标移入的环形块的数据并将所述数据渲染到内环中。本发明解决了鼠标移出内环块时，环形图内环的数据消失的问题，美化了页面、优化了用户体验并提高了页面的易用性。

Description

一种Echarts环形图内环展示环形数据的方法和装置

技术领域

本发明涉及计算机领域，并且更具体地，涉及一种Echarts环形图内环展示环形数据的方法和装置。

背景技术

随着互联网的飞速发展，web页面的展示也越来越丰富。在数据的图形化展示中，Echarts担任了很重要的角色。Echarts属于开源软件，并且提供了非常炫酷的图形界面。它使用简单，封装了JS接口，只需要引用就可以得到完美的展示效果。基于Echarts画出的环形图，鼠标移入环形图中环形块时，环形图内环展示环形块的信息，鼠标移出内环块时，环形图内环的数据消失，造成环形图的内环为空白，非常影响页面的美观，怎么才能让环形图内环中心的数据一直存在成为本发明所要解决的问题。

发明内容

鉴于此，本发明实施例的目的在于提出一种Echarts生成的环形图中的内环空白处持续展示环形数据的方法，在鼠标移出环形块时，内环持续展示鼠标移出之前的环形块数据。

基于上述目的，本发明实施例的一方面提供了一种Echarts环形图内环展示环形数据的方法，包括以下步骤：

定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中；

响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标；

根据所述获取的下标得到所述鼠标移入的环形块的数据并将所述数据渲染到内环中。

在一些实施方式中，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

预先定义内环中展示数据在环形块数据数组中的下标的对象，并将所述对象赋值为params.dataIndex*2+1。

在一些实施方式中，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中包括：

根据需求获取环形块数据数组中的特定的环形块的数据并将所述数据渲染到内环中。

在一些实施方式中，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中进一步包括：

默认获取环形块数据数组中的第一个环形块的数据并将所述数据渲染到内环中。

在一些实施方式中，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

绑定一个鼠标移入事件，以当鼠标移入环形块中时，触发所述钩子函数。

本发明实施例的另一方面提供了一种Echarts环形图内环展示环形数据的装置，包括：

至少一个处理器；和

存储器，所述存储器存储有处理器可运行的程序代码，所述程序代码在被处理器运行时实施以下步骤：

定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中；

响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标；

根据所述获取的下标得到所述鼠标移入的环形块的数据并将所述数据渲染到内环中。

在一些实施方式中，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

预先定义内环中展示数据在环形块数据数组中的下标的对象，并将所述对象赋值为params.dataIndex*2+1。

在一些实施方式中，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中包括：

根据需求获取环形块数据数组中的特定的环形块的数据并将所述数据渲染到内环中。

在一些实施方式中，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中进一步包括：

默认获取环形块数据数组中的第一个环形块的数据并将所述数据渲染到内环中。

在一些实施方式中，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

绑定一个鼠标移入事件，以当鼠标移入环形块中时，触发所述钩子函数。

本发明具有以下有益技术效果：本发明实施例提供的一种Echarts环形图内环展示环形数据的方法和装置解决了Echarts环形图中内环默认空白的不美观现状，并且内环中可以记住上一次鼠标移入的环形块的数据，帮助用户渲染需要查看的数据，美化页面、优化用户体验并提高页面的易用性。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的实施例。

图1是根据本发明的一种Echarts环形图内环展示环形数据的方法的流程图；

图2是根据本发明的一种Echarts环形图内环展示环形数据的装置的硬件结构示意图。

具体实施方式

以下描述了本发明的实施例。然而，应该理解，所公开的实施例仅仅是示例，并且其他实施例可以采取各种替代形式。附图不一定按比例绘制；某些功能可能被夸大或最小化以显示特定部件的细节。因此，本文公开的具体结构和功能细节不应被解释为限制性的，而仅仅是作为用于教导本领域技术人员以各种方式使用本发明的代表性基础。如本领域普通技术人员将理解的，参考任何一个附图所示出和描述的各种特征可以与一个或多个其他附图中所示的特征组合以产生没有明确示出或描述的实施例。所示特征的组合为典型应用提供了代表性实施例。然而，与本发明的教导相一致的特征的各种组合和修改对于某些特定应用或实施方式可能是期望的。

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明实施例进一步详细说明。

基于上述目的，本发明的实施例一方面提出了一种Echarts环形图内环展示环形数据的方法，如图1所示，包括以下步骤：

步骤S101：定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中；

步骤S102：响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标；

步骤S103：根据所述获取的下标得到所述鼠标移入的环形块的数据并将所述数据渲染到内环中。

在一些实施例中，在将环形图对象渲染到页面中之前，对所述环形图对象进行初始化。初始化环形图对象，是为了后续针对环形图对象进行操作，比如将环形图对象渲染到页面。

在根据本发明的一个实施例中，定义两个变量：chartObj(echarts环形图对象)和shapeIndex(内环中展示数据在数组中的下标)，其中chartObj＝echarts.init(document.getElementById(id))，该等式是创建一个Echarts对象，返回一个Echarts实例；shapeIndex的取值需要在Echarts对象初始化时配置对象option下的series对象下的itemStyle下的emphasis对象下的label对象下的formatter函数中获取，此函数的参数为params，shapeIndex＝params.dataIndex*2+1；

也就是option.series[0].itemStyle.emphasis.label.formatter＝function(params){shapeIndex＝params.dataIndex*2+1；}

其中，option.series[0].itemStyle.emphasis.label.formatter的对象展开以及具体对象含义如下所示：

在一些实施例中，获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中包括：根据需求获取环形块数据数组中的特定的环形块的数据并将所述数据渲染到内环中。例如，在一些实施例中，默认获取环形块数据数组中的第一个环形块的数据并将所述数据渲染到内环中。环形块就是环形图中的数据(环形图分的数据块，比如2块、3块)，这些环形块一共是一组数据数组，每个环形块只是这些数组数据的一个数据。因为默认只需要渲染一个内环数据，所以默认渲染第一个环形块的数据，也可以根据需求来渲染特定的数据，比如按照大小排序，默认渲染最大的数据；其他的环形块是鼠标点击时切换渲染。

在根据本发明的一个实施例中，Echarts对象初始化环形图时，给环形图的内环渲染数据：首先，获取渲染在内环中的数据，例如shape＝chartObj.chart.pie.shapeList[1]，即将环形块数据数组的第二个值赋值给shape变量，然后chartObj.chart.pie.shapeHandler.onmouseover({‘target’:shape})，也即在环形图中，鼠标移入时触发onmouseover函数(初始化时并未触发)，并给此函数参数赋值为上面获取的数据对象，然后chartObj.chart.pie.zr.refreshHover()，也即刷新鼠标移入时内环中展示的数据，即显示上一步中传入的数据对象；至此Echarts对象初始化环形图时，内环中就显示了环形块中的数据。也即，环形图初始化时，需要给内环填充一个默认值，其中对象展开以及具体对象含义如下所示：

在一些实施例中，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：绑定一个鼠标移入事件，以当鼠标移入环形块中时，触发所述钩子函数。

在根据本发明的一个实施例中，实现环形图鼠标移入时，内环展示对应环形块数据：Echarts对象初始化环形图的Dom对象中，绑定一个鼠标移入事件(mouseout)，当鼠标移入时，就会触发上述实施例中的formatter函数(也即钩子函数)，从而给shapeIndex赋值，shape＝chartObj.chart.pie.shapeList[shapeIndex]根据取得的环形块所在数组的下标，获取到鼠标移入时所在的环形块的数据，然后chartObj.chart.pie.shapeHandler.onmouseover({‘target’:shape})，用获取的环形块的数据给环形图的内环赋值，重新渲染环形图chartObj.chart.pie.zr.refreshHover()；至此鼠标移入环形块时，内环中就显示了环形块中的数据。这样，鼠标移出环形块后，内环中的展示的数据持续存在。

在技术上可行的情况下，以上针对不同实施例所列举的技术特征可以相互组合，或者改变、添加以及省略等等，从而形成本发明范围内的另外实施例。

从上述实施例可以看出，本发明实施例提供的一种Echarts环形图内环展示环形数据的方法解决了Echarts环形图中内环默认空白的不美观现状，并且内环中可以记住上一次鼠标移入的环形块的数据，帮助用户渲染需要查看的数据，美化页面、优化用户体验并提高页面的易用性。

基于上述目的，本发明实施例的另一个方面，提出了一种Echarts环形图内环展示环形数据的装置一个实施例，包括：至少一个处理器；和存储器，所述存储器存储有处理器可运行的程序代码，所述程序代码在被处理器运行时实施以下步骤：

定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中；

响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标；

根据所述获取的下标得到所述鼠标移入的环形块的数据并将所述数据渲染到内环中。

在一些实施例中，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

预先定义内环中展示数据在环形块数据数组中的下标的对象，并将所述对象赋值为params.dataIndex*2+1。

在一些实施例中，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中包括：

根据需求获取环形块数据数组中的特定的环形块的数据并将所述数据渲染到内环中。

在一些实施例中，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中进一步包括：

默认获取环形块数据数组中的第一个环形块的数据并将所述数据渲染到内环中。

在一些实施例中，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

绑定一个鼠标移入事件，以当鼠标移入环形块中时，触发所述钩子函数。

如图2所示，为本发明提供的Echarts环形图内环展示环形数据的装置的一个实施例的硬件结构示意图。

以如图2所示的计算机设备为例，在该计算机设备中包括处理器201以及存储器202，并还可以包括：输入装置203和输出装置204。

处理器201、存储器202、输入装置203和输出装置204可以通过总线或者其他方式连接，图2中以通过总线连接为例。

存储器202作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本申请实施例中的所述Echarts环形图内环展示环形数据的方法对应的程序指令/模块。处理器201通过运行存储在存储器202中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例的Echarts环形图内环展示环形数据的方法。

存储器202可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据Echarts环形图内环展示环形数据的方法所创建的数据等。此外，存储器202可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器202可选包括相对于处理器201远程设置的存储器，这些远程存储器可以通过网络连接至本地模块。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置203可接收输入的数字或字符信息，以及产生与Echarts环形图内环展示环形数据的方法的计算机设备的用户设置以及功能控制有关的键信号输入。输出装置204可包括显示屏等显示设备。

所述一个或者多个Echarts环形图内环展示环形数据的方法对应的程序指令/模块存储在所述存储器202中，当被所述处理器201执行时，执行上述任意方法实施例中的Echarts环形图内环展示环形数据的方法。

所述执行所述Echarts环形图内环展示环形数据的方法的计算机设备的任何一个实施例，可以达到与之对应的前述任意方法实施例相同或者相类似的效果。

最后需要说明的是，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关硬件来完成，所述的程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(ROM)或随机存储记忆体(RAM)等。

此外，典型地，本发明实施例公开所述的装置、设备等可为各种电子终端设备，例如手机、个人数字助理(PDA)、平板电脑(PAD)、智能电视等，也可以是大型终端设备，如服务器等，因此本发明实施例公开的保护范围不应限定为某种特定类型的装置、设备。本发明实施例公开所述的客户端可以是以电子硬件、计算机软件或两者的组合形式应用于上述任意一种电子终端设备中。

此外，根据本发明实施例公开的方法还可以被实现为由CPU执行的计算机程序，该计算机程序可以存储在计算机可读存储介质中。在该计算机程序被CPU执行时，执行本发明实施例公开的方法中限定的上述功能。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储介质实现。

此外，应该明白的是，本文所述的计算机可读存储介质(例如，存储器)可以是易失性存储器或非易失性存储器，或者可以包括易失性存储器和非易失性存储器两者。作为例子而非限制性的，非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦写可编程ROM(EEPROM)或快闪存储器。易失性存储器可以包括随机存取存储器(RAM)，该RAM可以充当外部高速缓存存储器。作为例子而非限制性的，RAM可以以多种形式获得，比如同步RAM(DRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强SDRAM(ESDRAM)、同步链路DRAM(SLDRAM)、以及直接Rambus RAM(DRRAM)。所公开的方面的存储设备意在包括但不限于这些和其它合适类型的存储器。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明实施例公开的范围。

结合这里的公开所描述的各种示例性逻辑块、模块和电路可以利用被设计成用于执行这里所述功能的下列部件来实现或执行：通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。通用处理器可以是微处理器，但是可替换地，处理器可以是任何传统处理器、控制器、微控制器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP和/或任何其它这种配置。

结合这里的公开所描述的方法或算法的步骤可以直接包含在硬件中、由处理器执行的软件模块中或这两者的组合中。软件模块可以驻留在RAM存储器、快闪存储器、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动盘、CD-ROM、或本领域已知的任何其它形式的存储介质中。示例性的存储介质被耦合到处理器，使得处理器能够从该存储介质中读取信息或向该存储介质写入信息。在一个替换方案中，所述存储介质可以与处理器集成在一起。处理器和存储介质可以驻留在ASIC中。ASIC可以驻留在用户终端中。在一个替换方案中，处理器和存储介质可以作为分立组件驻留在用户终端中。

在一个或多个示例性设计中，所述功能可以在硬件、软件、固件或其任意组合中实现。如果在软件中实现，则可以将所述功能作为一个或多个指令或代码存储在计算机可读介质上或通过计算机可读介质来传送。计算机可读介质包括计算机存储介质和通信介质，该通信介质包括有助于将计算机程序从一个位置传送到另一个位置的任何介质。存储介质可以是能够被通用或专用计算机访问的任何可用介质。作为例子而非限制性的，该计算机可读介质可以包括RAM、ROM、EEPROM、CD-ROM或其它光盘存储设备、磁盘存储设备或其它磁性存储设备，或者是可以用于携带或存储形式为指令或数据结构的所需程序代码并且能够被通用或专用计算机或者通用或专用处理器访问的任何其它介质。此外，任何连接都可以适当地称为计算机可读介质。例如，如果使用同轴线缆、光纤线缆、双绞线、数字用户线路(DSL)或诸如红外线、无线电和微波的无线技术来从网站、服务器或其它远程源发送软件，则上述同轴线缆、光纤线缆、双绞线、DSL或诸如红外线、无线电和微波的无线技术均包括在介质的定义。如这里所使用的，磁盘和光盘包括压缩盘(CD)、激光盘、光盘、数字多功能盘(DVD)、软盘、蓝光盘，其中磁盘通常磁性地再现数据，而光盘利用激光光学地再现数据。上述内容的组合也应当包括在计算机可读介质的范围内。

应当理解的是，在本文中使用的，除非上下文清楚地支持例外情况，单数形式“一个”旨在也包括复数形式。还应当理解的是，在本文中使用的“和/或”是指包括一个或者一个以上相关联地列出的项目的任意和所有可能组合。

上述本发明实施例公开实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器、磁盘或光盘等。

上述实施例是实施方式的可能示例，并且仅仅为了清楚理解本发明的原理而提出。所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本发明实施例公开的范围(包括权利要求)被限于这些例子；在本发明实施例的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，并存在如上所述的本发明实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。因此，凡在本发明实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。

Claims (10)

1.一种Echarts环形图内环展示环形数据的方法，其特征在于，包括以下步骤：

定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中；

响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标；

根据所述获取的下标得到所述鼠标移入的环形块的数据并将所述数据渲染到内环中。

2.根据权利要求1所述的方法，其特征在于，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

预先定义内环中展示数据在环形块数据数组中的下标的对象，并将所述对象赋值为params.dataIndex*2+1。

3.根据权利要求1所述的方法，其特征在于，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中包括：

根据需求获取环形块数据数组中的特定的环形块的数据并将所述数据渲染到内环中。

4.根据权利要求1所述的方法，其特征在于，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中进一步包括：

默认获取环形块数据数组中的第一个环形块的数据并将所述数据渲染到内环中。

5.根据权利要求2所述的方法，其特征在于，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

绑定一个鼠标移入事件，以当鼠标移入环形块中时，触发所述钩子函数。

6.一种Echarts环形图内环展示环形数据的装置，其特征在于，包括：

至少一个处理器；和

存储器，所述存储器存储有处理器可运行的程序代码，所述程序代码在被处理器运行时实施以下步骤：

定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中；

响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标；

根据所述获取的下标得到所述鼠标移入的环形块的数据并将所述数据渲染到内环中。

7.根据权利要求6所述的装置，其特征在于，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

预先定义内环中展示数据在环形块数据数组中的下标的对象，并将所述对象赋值为params.dataIndex*2+1。

8.根据权利要求6所述的装置，其特征在于，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中包括：

根据需求获取环形块数据数组中的特定的环形块的数据并将所述数据渲染到内环中。

9.根据权利要求6所述的方法，其特征在于，所述定义环形图对象，并在所述环形图对象初始化过程中获取环形块数据数组中的任意一个环形块的数据并将所述数据渲染到内环中进一步包括：

默认获取环形块数据数组中的第一个环形块的数据并将所述数据渲染到内环中。

10.根据权利要求7所述的装置，其特征在于，所述响应于鼠标移入环形块中，触发钩子函数来获取当前所述鼠标移入的环形块在所述环形块数据数组中的下标包括：

绑定一个鼠标移入事件，以当鼠标移入环形块中时，触发所述钩子函数。