Movatterモバイル変換


[0]ホーム

URL:


CN118778848A - Relationship diagram pop-up carousel logic algorithm based on ECharts component - Google Patents

Relationship diagram pop-up carousel logic algorithm based on ECharts component
Download PDF

Info

Publication number
CN118778848A
CN118778848ACN202411248735.6ACN202411248735ACN118778848ACN 118778848 ACN118778848 ACN 118778848ACN 202411248735 ACN202411248735 ACN 202411248735ACN 118778848 ACN118778848 ACN 118778848A
Authority
CN
China
Prior art keywords
carousel
node
relationship
pop
logic
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202411248735.6A
Other languages
Chinese (zh)
Other versions
CN118778848B (en
Inventor
徐正兵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Vtron Software Nanjing Co ltd
Original Assignee
Vtron Software Nanjing Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Vtron Software Nanjing Co ltdfiledCriticalVtron Software Nanjing Co ltd
Priority to CN202411248735.6ApriorityCriticalpatent/CN118778848B/en
Publication of CN118778848ApublicationCriticalpatent/CN118778848A/en
Application grantedgrantedCritical
Publication of CN118778848BpublicationCriticalpatent/CN118778848B/en
Activelegal-statusCriticalCurrent
Anticipated expirationlegal-statusCritical

Links

Classifications

Landscapes

Abstract

Translated fromChinese

本发明公开了基于ECharts组件的关系图弹窗轮播逻辑算法,包括以下步骤:S1:确定关系图的展现形式;S2:根据展示内容确定关系图展示的节点数据和节点之间的关系数据以及两个节点的关系类型,构建关系复杂度计算公式;S3:将数据接口采集到的数据通过通信网络传输到数据处理中心;S4:通过关系图算法将弹窗的轮播逻辑进行配置,并构建节点权重计算公式;S5:按照配置的算法进行弹窗轮播。本发明通过对弹窗轮播逻辑的可配置功能可以灵活性的实现用户对展示内容的要求,可广泛应用于电力系统监控领域,提高电力系统指标的展示形式。

The present invention discloses a relationship graph pop-up carousel logic algorithm based on the ECharts component, including the following steps: S1: determine the display form of the relationship graph; S2: determine the node data displayed by the relationship graph and the relationship data between the nodes and the relationship type between the two nodes according to the display content, and construct a relationship complexity calculation formula; S3: transmit the data collected by the data interface to the data processing center through the communication network; S4: configure the pop-up carousel logic through the relationship graph algorithm, and construct a node weight calculation formula; S5: perform pop-up carousel according to the configured algorithm. The present invention can flexibly realize the user's requirements for display content through the configurable function of the pop-up carousel logic, and can be widely used in the field of power system monitoring to improve the display form of power system indicators.

Description

Translated fromChinese
基于ECharts组件的关系图弹窗轮播逻辑算法Relationship diagram pop-up carousel logic algorithm based on ECharts component

技术领域Technical Field

本发明涉及ECharts组件应用、电力监控和数据分析技术领域,尤其涉及基于ECharts组件的关系图弹窗轮播逻辑算法。The present invention relates to the fields of ECharts component application, power monitoring and data analysis technology, and in particular to a relationship diagram pop-up carousel logic algorithm based on the ECharts component.

背景技术Background Art

在大数据和信息可视化领域,关系图作为一种重要的图形展示方式,广泛应用于社交网络分析、组织结构展示、知识图谱构建等场景。In the field of big data and information visualization, relationship diagrams, as an important graphical display method, are widely used in scenarios such as social network analysis, organizational structure display, and knowledge graph construction.

现有技术主要面临几方面的局限性,首先,数据展示通常是静态的,缺乏实时性和动态性,难以适应快速变化的业务需求,其次,用户交互功能有限,无法灵活自定义操作,难以满足复杂应用场景的个性化需求,传统关系图在展示效果和算法配置上也存在不足,节点和边缘样式配置通常预设,难以动态调整,影响展示的美观和灵活性,因此需要设计基于ECharts组件的关系图弹窗轮播逻辑算法来解决上述方法。The existing technology mainly faces several limitations. First, data display is usually static, lacking real-time and dynamic features, and is difficult to adapt to rapidly changing business needs. Second, user interaction functions are limited, and operations cannot be flexibly customized, making it difficult to meet the personalized needs of complex application scenarios. Traditional relationship diagrams also have shortcomings in display effects and algorithm configuration. Node and edge style configurations are usually preset and difficult to adjust dynamically, affecting the beauty and flexibility of the display. Therefore, it is necessary to design a relationship diagram pop-up carousel logic algorithm based on the ECharts component to solve the above method.

发明内容Summary of the invention

本部分的目的在于概述本发明的实施例的一些方面以及简要介绍一些较佳实施例。在本部分以及本申请的说明书摘要和发明名称中可能会做些简化或省略以避免使本部分、说明书摘要和发明名称的目的模糊,而这种简化或省略不能用于限制本发明的范围。The purpose of this section is to summarize some aspects of embodiments of the present invention and briefly introduce some preferred embodiments. Some simplifications or omissions may be made in this section and the specification abstract and the invention title of this application to avoid blurring the purpose of this section, the specification abstract and the invention title, and such simplifications or omissions cannot be used to limit the scope of the present invention.

鉴于上述现有基于ECharts组件的关系图弹窗轮播逻辑算法存在的问题,提出了本发明。In view of the problems existing in the above-mentioned existing ECharts component-based relationship diagram pop-up carousel logic algorithm, the present invention is proposed.

因此,本发明目的是提供基于ECharts组件的关系图弹窗轮播逻辑算法,其适用于解决数据展示通常是静态的,缺乏实时性和动态性、用户交互功能有限,难以满足复杂应用场景的个性化需求的问题。Therefore, the purpose of the present invention is to provide a relationship diagram pop-up carousel logic algorithm based on the ECharts component, which is suitable for solving the problem that data display is usually static, lacks real-time and dynamics, has limited user interaction functions, and is difficult to meet the personalized needs of complex application scenarios.

为解决上述技术问题,本发明提供如下技术方案:基于ECharts组件的关系图弹窗轮播逻辑算法,包括以下步骤:In order to solve the above technical problems, the present invention provides the following technical solution: a relationship diagram pop-up carousel logic algorithm based on the ECharts component, comprising the following steps:

S1:确定关系图的展现形式;S1: Determine the presentation format of the relationship diagram;

S2:根据展示内容确定关系图展示的节点数据和节点之间的关系数据以及两个节点的关系类型,构建关系复杂度计算公式;S2: Determine the node data displayed in the relationship graph, the relationship data between the nodes, and the relationship type between the two nodes according to the displayed content, and construct a relationship complexity calculation formula;

S3:将数据接口采集到的数据通过通信网络传输到数据处理中心;S3: Transmitting the data collected by the data interface to the data processing center through the communication network;

S4:通过关系图算法将弹窗的轮播逻辑进行配置,并构建节点权重计算公式;S4: Configure the pop-up carousel logic through the relationship graph algorithm and build a node weight calculation formula;

S5:按照配置的算法进行弹窗轮播。S5: Perform pop-up carousel according to the configured algorithm.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:所述节点权重计算公式如下:As a preferred solution of the ECharts component-based relationship diagram pop-up carousel logic algorithm of the present invention, the node weight calculation formula is as follows:

其中,表示总的节点数量,表示第i个节点,i=1,2,3,...,N,表示节点的权重,表示节点的重要性,表示节点的第k个指标得分,M表示节点的指标总数。in, Represents the total number of nodes, represents the i-th node, i=1, 2, 3, ..., N, Representation Node The weight represents the importance of the node. Representation Node The kth index score of The total number of indicators.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:在节点权重计算公式的输出结果中,设定节点权重阈值为As a preferred solution of the ECharts component-based relationship diagram pop-up carousel logic algorithm of the present invention, wherein: in the output result of the node weight calculation formula, the node weight threshold is set to ;

,则该节点为重要节点,要在后续的轮播逻辑中重点展示;like , then the node is an important node and should be highlighted in the subsequent carousel logic;

,则该节点为非重要节点,无需在后续的轮播逻辑中重点展示。like , then the node is a non-important node and does not need to be highlighted in the subsequent carousel logic.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:所述关系复杂度计算公式如下:As a preferred solution of the ECharts component-based relationship diagram pop-up carousel logic algorithm of the present invention, the relationship complexity calculation formula is as follows:

其中,表示节点之间的关系复杂度,表示节点之间第j个关系度量,J表示节点之间关系度量的总数。in, Representation Node and The complexity of the relationship between Representation Node and is the jth relationship metric between nodes, and J represents the total number of relationship metrics between nodes.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:在关系复杂度计算公式的输出结果中,设定复杂度阈值As a preferred solution of the ECharts component-based relationship diagram pop-up carousel logic algorithm of the present invention, wherein: in the output result of the relationship complexity calculation formula, a complexity threshold is set ;

,则表示节点之间关系复杂度高,要在关系图中采用直观的展示方式;like , it means that the relationship between nodes is highly complex and an intuitive display method should be used in the relationship diagram;

,则表示节点之间关系复杂度低,无需在关系图中直接展示。like , it means that the complexity of the relationship between nodes is low and there is no need to display it directly in the relationship diagram.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:根据关系复杂度计算公式的输出结果和节点权重计算公式的输出结果构建节点显示时间调整公式,所述节点显示时间调整公式如下:As a preferred solution of the relationship diagram pop-up carousel logic algorithm based on the ECharts component of the present invention, a node display time adjustment formula is constructed according to the output result of the relationship complexity calculation formula and the output result of the node weight calculation formula. The node display time adjustment formula is as follows:

其中,表示节点的显示时间,表示节点在轮播中的展示时间,表示基于关系复杂度的衰减因子随着关系复杂度的增加,衰减因子减少,表示控制衰减速率。in, Representation Node The display time indicates the display time of the node in the carousel. Represents the decay factor based on the complexity of the relationship as the complexity of the relationship increases As the attenuation factor decreases, Indicates the control decay rate.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:在节点显示调整公式的输出结果中,设定节点显示时间阈值As a preferred solution of the ECharts component-based relationship diagram pop-up carousel logic algorithm of the present invention, wherein: in the output result of the node display adjustment formula, the node display time threshold is set ;

,则需要增加该节点的展示时间;like , you need to increase the display time of the node;

,无需增加该节点的展示时间。like , there is no need to increase the display time of the node.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:根据节点显示时间调整公式的输出结果构建轮播速度调整公式,所述轮播速度调整公式如下:As a preferred solution of the ECharts component-based relationship diagram pop-up carousel logic algorithm of the present invention, wherein: a carousel speed adjustment formula is constructed according to the output result of the node display time adjustment formula, and the carousel speed adjustment formula is as follows:

其中,表示轮播速度调整函数,表示在时间t时的轮播速度,为逻辑函数,用于控制速度变化的平滑度,参数决定速度调整的灵敏度,T表示轮播周期总时长。in, represents the carousel speed adjustment function, which represents the carousel speed at time t. is a logic function used to control the smoothness of speed changes. Determines the sensitivity of speed adjustment, and T represents the total duration of the carousel cycle.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:在轮播速度调整公式的输出结果中,设定轮播速度阈值上限和阈值下限As a preferred solution of the ECharts component-based relationship diagram pop-up carousel logic algorithm of the present invention, wherein: in the output result of the carousel speed adjustment formula, the upper limit of the carousel speed threshold is set and lower threshold ;

,需要减缓轮播速度;like ,The carousel speed needs to be slowed down;

;无需调整轮播速度;like ; No need to adjust the carousel speed;

,则需要提高轮播速度。like , you need to increase the carousel speed.

作为本发明所述基于ECharts组件的关系图弹窗轮播逻辑算法的一种优选方案,其中:所述指标得分包括用户点击次数、查看时长和节点的连接度。As a preferred solution of the relationship diagram pop-up carousel logic algorithm based on the ECharts component described in the present invention, the indicator score includes the number of user clicks, viewing time and node connectivity.

本发明的有益效果:Beneficial effects of the present invention:

1. 灵活性强:通过对弹窗轮播逻辑的可配置功能可以灵活性的实现用户对展示内容的要求;1. Strong flexibility: The configurable function of pop-up carousel logic can flexibly meet the user's requirements for display content;

2. 可视化效果好:通过ECharts组件的可视化功能,将需要展示的内容和效果动态的展示出来以达到更好的展示效果;2. Good visualization effect: Through the visualization function of ECharts components, the content and effects to be displayed can be dynamically displayed to achieve better display effects;

3. 应用范围广:该算法可广泛应用于电力系统监控领域,提高电力系统指标的展示形式。3. Wide range of applications: This algorithm can be widely used in the field of power system monitoring to improve the display form of power system indicators.

附图说明BRIEF DESCRIPTION OF THE DRAWINGS

为了更清楚地说明本发明实施例的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其它的附图。其中:In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for describing the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. Among them:

图1为本发明提出的基于ECharts组件的关系图弹窗轮播逻辑算法的整体步骤示意图;FIG1 is a schematic diagram of the overall steps of the relationship diagram pop-up carousel logic algorithm based on the ECharts component proposed by the present invention;

图2为本发明提出的基于ECharts组件的关系图弹窗轮播逻辑算法的算法逻辑示意图。FIG. 2 is a schematic diagram of the algorithm logic of the relationship diagram pop-up carousel logic algorithm based on the ECharts component proposed by the present invention.

具体实施方式DETAILED DESCRIPTION

为使本发明的上述目的、特征和优点能够更加明显易懂,下面结合说明书附图对本发明的具体实施方式做详细的说明。In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings.

在下面的描述中阐述了很多具体细节以便于充分理解本发明,但是本发明还可以采用其他不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本发明内涵的情况下做类似推广,因此本发明不受下面公开的具体实施例的限制。In the following description, many specific details are set forth to facilitate a full understanding of the present invention, but the present invention may also be implemented in other ways different from those described herein, and those skilled in the art may make similar generalizations without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

其次,此处所称的“一个实施例”或“实施例”是指可包含于本发明至少一个实现方式中的特定特征、结构或特性。在本说明书中不同地方出现的“在一个实施例中”并非均指同一个实施例,也不是单独的或选择性的与其他实施例互相排斥的实施例。Secondly, the term "one embodiment" or "embodiment" as used herein refers to a specific feature, structure, or characteristic that may be included in at least one implementation of the present invention. The term "in one embodiment" that appears in different places in this specification does not necessarily refer to the same embodiment, nor does it refer to a separate or selective embodiment that is mutually exclusive with other embodiments.

再其次,本发明结合示意图进行详细描述,在详述本发明实施例时,为便于说明,表示器件结构的剖面图会不依一般比例作局部放大,而且所述示意图只是示例,其在此不应限制本发明保护的范围。此外,在实际制作中应包含长度、宽度及深度的三维空间尺寸。Secondly, the present invention is described in detail with reference to the schematic diagram. When describing the embodiments of the present invention in detail, for the sake of convenience, the cross-sectional diagrams showing the device structure will not be partially enlarged according to the general scale, and the schematic diagrams are only examples, which should not limit the scope of protection of the present invention. In addition, in actual production, the three-dimensional dimensions of length, width and depth should be included.

实施例一Embodiment 1

参照图1-图2,为本发明的一个实施例,提供了基于ECharts组件的关系图弹窗轮播逻辑算法,包括以下步骤:1-2 , an embodiment of the present invention provides a relationship diagram pop-up carousel logic algorithm based on the ECharts component, including the following steps:

S1:确定关系图的展现形式;S1: Determine the presentation format of the relationship diagram;

基于具体展示需求对关系图进行定制化设计,以确保数据的逻辑结构和视觉效果最优化,提高了用户在数据展示中的参与感和主动性,能够根据实际需求灵活调整展示内容,使得关系图不仅美观且信息传递效率更高;Customized design of relationship diagrams based on specific display requirements ensures the optimization of the logical structure and visual effects of data, improves the user's sense of participation and initiative in data display, and can flexibly adjust the display content according to actual needs, making the relationship diagram not only beautiful but also more efficient in information transmission;

S2:根据展示内容确定关系图展示的节点数据和节点之间的关系数据以及两个节点的关系类型,构建关系复杂度计算公式;S2: Determine the node data displayed in the relationship graph, the relationship data between the nodes, and the relationship type between the two nodes according to the displayed content, and construct a relationship complexity calculation formula;

准备好需要展示的节点数据和节点之间的关系数据,每个节点应该包含唯一标识符、显示名称、相关信息等。节点之间的关系数据包括连接两个节点的关系类型,例如父子关系、兄弟关系等;Prepare the node data and relationship data between nodes to be displayed. Each node should contain a unique identifier, display name, related information, etc. The relationship data between nodes includes the type of relationship connecting two nodes, such as parent-child relationship, sibling relationship, etc.

S3:将数据接口采集到的数据通过通信网络传输到数据处理中心;S3: Transmitting the data collected by the data interface to the data processing center through the communication network;

S4:通过关系图算法将弹窗的轮播逻辑进行配置,并构建节点权重计算公式;S4: Configure the pop-up carousel logic through the relationship graph algorithm and build a node weight calculation formula;

使用 ECharts 中的关系图组件,配置节点的样式、关系的样式、布局等参数。确保关系图能正确显示节点之间的关系;Use the relationship graph component in ECharts to configure the node style, relationship style, layout and other parameters. Ensure that the relationship graph can correctly display the relationship between nodes;

在组件中设计轮播功能,使用户可以通过鼠标悬浮或自动播放的方式浏览与当前节点相关的弹窗信息;在组件中设计播放配置功能,用户可以根据自身的浏览行为和节点重要性,动态调整轮播的速度和指标颜色;Design a carousel function in the component so that users can browse pop-up information related to the current node by hovering the mouse or automatically playing; design a playback configuration function in the component so that users can dynamically adjust the speed and indicator color of the carousel according to their browsing behavior and node importance;

创新性地利用ECharts组件的强大可视化功能,将传输过来的数据进行动态展示,并结合弹窗设计来提供节点的详细信息。这种设计不仅实现了数据的可视化,还通过弹窗形式提供了深度交互体验,使得用户可以在查看关系图的同时获得节点的详细信息;提供了多层次的信息展示能力,用户在浏览关系图时能够即时获取详细信息,提升了用户的交互体验和信息获取效率;The powerful visualization function of ECharts components is innovatively used to dynamically display the transmitted data, and combined with the pop-up window design to provide detailed information of the nodes. This design not only realizes the visualization of data, but also provides a deep interactive experience through pop-up windows, so that users can obtain detailed information of nodes while viewing the relationship diagram; it provides multi-level information display capabilities, and users can instantly obtain detailed information when browsing the relationship diagram, which improves the user's interactive experience and information acquisition efficiency;

S5:按照配置的算法进行弹窗轮播;S5: Perform pop-up carousel according to the configured algorithm;

在轮播逻辑中,可以采用以下算法实现动态播放:设定一个播放逻辑,按照逻辑顺序播放,当到达最后一个节点时,切换到第一个节点,形成循环播放效果;在轮播逻辑中,能够根据节点关系的复杂程度(如多层次父子关系、多重兄弟关系等)动态调整关系图的布局和视觉效果;In the carousel logic, the following algorithm can be used to achieve dynamic playback: set a playback logic, play in logical order, and when reaching the last node, switch to the first node to form a loop playback effect; in the carousel logic, the layout and visual effects of the relationship diagram can be dynamically adjusted according to the complexity of the node relationship (such as multi-level parent-child relationship, multiple sibling relationship, etc.);

节点权重计算公式如下:The node weight calculation formula is as follows:

其中,表示总的节点数量,表示第i个节点,i=1,2,3,...,N,表示节点的权重,表示节点的重要性,表示节点的第k个指标得分,指标得分包括用户点击次数、查看时长和节点的连接度,M表示节点的指标总数。in, Represents the total number of nodes, represents the i-th node, i=1, 2, 3, ..., N, Representation Node The weight represents the importance of the node. Representation Node The kth indicator score includes the number of user clicks, viewing time and node connectivity. M represents the node The total number of indicators.

在节点权重计算公式的输出结果中,设定节点权重阈值为In the output result of the node weight calculation formula, the node weight threshold is set to ;

,则该节点为重要节点,要在后续的轮播逻辑中重点展示;like , then the node is an important node and should be highlighted in the subsequent carousel logic;

,则该节点为非重要节点,无需在后续的轮播逻辑中重点展示。like , then the node is a non-important node and does not need to be highlighted in the subsequent carousel logic.

关系复杂度计算公式如下:The formula for calculating relational complexity is as follows:

其中,表示节点之间的关系复杂度,表示节点之间第j个关系度量,J表示节点之间关系度量的总数。in, Representation Node and The complexity of the relationship between Representation Node and is the jth relationship metric between nodes, and J represents the total number of relationship metrics between nodes.

在关系复杂度计算公式的输出结果中,设定复杂度阈值In the output of the relational complexity calculation formula, set the complexity threshold ;

,则表示节点之间关系复杂度高,要在关系图中采用直观的展示方式;like , it means that the relationship between nodes is highly complex and an intuitive display method should be used in the relationship diagram;

,则表示节点之间关系复杂度低,无需在关系图中直接展示。like , it means that the complexity of the relationship between nodes is low and there is no need to display it directly in the relationship diagram.

根据关系复杂度计算公式的输出结果和节点权重计算公式的输出结果构建节点显示时间调整公式,节点显示时间调整公式如下:The node display time adjustment formula is constructed based on the output results of the relationship complexity calculation formula and the node weight calculation formula. The node display time adjustment formula is as follows:

其中,表示节点的显示时间,表示节点在轮播中的展示时间,表示基于关系复杂度的衰减因子随着关系复杂度的增加,衰减因子减少,表示控制衰减速率。in, Representation Node The display time indicates the display time of the node in the carousel. Represents the decay factor based on the complexity of the relationship as the complexity of the relationship increases As the attenuation factor decreases, Indicates the control decay rate.

在节点显示调整公式的输出结果中,设定节点显示时间阈值In the output of the node display adjustment formula, set the node display time threshold ;

,则需要增加该节点的展示时间;like , you need to increase the display time of the node;

,无需增加该节点的展示时间。like , there is no need to increase the display time of the node.

根据节点显示时间调整公式的输出结果构建轮播速度调整公式,轮播速度调整公式如下:The carousel speed adjustment formula is constructed based on the output result of the node display time adjustment formula. The carousel speed adjustment formula is as follows:

其中,表示轮播速度调整函数,表示在时间t时的轮播速度,为逻辑函数,用于控制速度变化的平滑度,参数决定速度调整的灵敏度,T表示轮播周期总时长。in, represents the carousel speed adjustment function, which represents the carousel speed at time t. is a logic function used to control the smoothness of speed changes. Determines the sensitivity of speed adjustment, and T represents the total duration of the carousel cycle.

在轮播速度调整公式的输出结果中,设定轮播速度阈值上限和阈值下限In the output result of the carousel speed adjustment formula, set the upper limit of the carousel speed threshold and lower threshold ;

,需要减缓轮播速度;like ,The carousel speed needs to be slowed down;

;无需调整轮播速度;like ; No need to adjust the carousel speed;

,则需要提高轮播速度。like , you need to increase the carousel speed.

实施例二Embodiment 2

参照表1,为本发明第二个实施例,该实施例不同于第一个实施例的是,为了验证其有益效果,提供了本发明与现有技术的实验对比数据。Referring to Table 1, which is a second embodiment of the present invention, this embodiment is different from the first embodiment in that, in order to verify its beneficial effects, experimental comparison data between the present invention and the prior art are provided.

为了验证基于ECharts组件的关系图弹窗轮播逻辑算法的有效性和优越性,我们进行了一个对比实验,选取了一个社交网络的数据集,包含1000个用户节点及其关系数据,我们根据不同展示内容设置了节点数据,包括用户的唯一标识符、显示名称、点击次数、查看时长和节点连接度等,实验分别采用现有的静态关系图展示技术和本发明的动态关系图弹窗轮播逻辑算法进行可视化展示。In order to verify the effectiveness and superiority of the relationship graph pop-up carousel logic algorithm based on the ECharts component, we conducted a comparative experiment and selected a social network data set containing 1,000 user nodes and their relationship data. We set the node data according to different display content, including the user's unique identifier, display name, number of clicks, viewing time, and node connectivity. The experiment used the existing static relationship graph display technology and the dynamic relationship graph pop-up carousel logic algorithm of the present invention for visual display.

具体实施过程中,我们首先通过数据接口从数据源采集节点数据和节点之间的关系数据,并通过通信网络将这些数据传输到数据处理中心。在数据处理中心,我们利用ECharts组件对数据进行了可视化处理,并设计了弹窗的展示形式,包含详细的用户信息和交互操作提示,通过关系图算法,我们配置了弹窗的轮播逻辑,使得用户可以通过鼠标悬浮或自动播放的方式浏览与当前节点相关的弹窗信息。During the specific implementation process, we first collected node data and relationship data between nodes from the data source through the data interface, and transmitted this data to the data processing center through the communication network. In the data processing center, we used the ECharts component to visualize the data and designed a pop-up window display format, including detailed user information and interactive operation prompts. Through the relationship graph algorithm, we configured the pop-up window carousel logic, so that users can browse the pop-up window information related to the current node by hovering the mouse or automatically playing.

在节点权重计算公式中,我们通过用户点击次数、查看时长和节点连接度等指标,计算了每个节点的综合重要性指数K,并在此基础上调整了弹窗的轮播速度和展示频率,关系复杂度计算公式根据节点重要性指数计算了弹窗的轮播优先级L,并根据关系的复杂程度,优化了关系图的布局,节点显示时间调整公式计算了每个节点的弹窗展示时长T,以确保重要节点得到充分展示,最后,轮播速度调整公式依据节点的重要性和展示时长,动态调整了关系图的整体可视化效果,使得关系图展示更具吸引力和信息量。In the node weight calculation formula, we calculated the comprehensive importance index K of each node through indicators such as the number of user clicks, viewing time and node connectivity, and adjusted the carousel speed and display frequency of the pop-up window on this basis. The relationship complexity calculation formula calculated the carousel priority L of the pop-up window according to the node importance index, and optimized the layout of the relationship diagram according to the complexity of the relationship. The node display time adjustment formula calculated the pop-up window display time T of each node to ensure that important nodes are fully displayed. Finally, the carousel speed adjustment formula dynamically adjusted the overall visualization effect of the relationship diagram based on the importance and display time of the node, making the relationship diagram display more attractive and informative.

从表1中可以看出,本发明的基于ECharts组件的关系图弹窗轮播逻辑算法在用户交互效果和信息展示效率上明显优于现有技术,具体可以从以下三个方面进行分析:It can be seen from Table 1 that the relationship diagram pop-up carousel logic algorithm based on the ECharts component of the present invention is significantly better than the prior art in terms of user interaction effect and information display efficiency, which can be specifically analyzed from the following three aspects:

用户点击次数与查看时长:与现有技术相比,本发明显著增加了用户的点击次数和查看时长,对于节点1,点击次数从150次增加到230次,查看时长从35秒增加到50秒。这表明本发明在展示信息时,能够吸引更多的用户参与和停留,从而提升了用户体验;User clicks and viewing time: Compared with the prior art, the present invention significantly increases the number of user clicks and viewing time. For node 1, the number of clicks increases from 150 to 230, and the viewing time increases from 35 seconds to 50 seconds. This shows that the present invention can attract more users to participate and stay when displaying information, thereby improving the user experience;

节点连接度与展示效果:通过比较节点的连接度,我们发现本发明在展示复杂关系时表现更佳,节点1的连接度从10增加到12,节点2的连接度从8增加到9,说明本发明的算法在处理节点关系和展示复杂性上有明显优势,能够更好地体现节点之间的关系;Node connectivity and display effect: By comparing the connectivity of nodes, we found that the present invention performs better in displaying complex relationships. The connectivity of node 1 increases from 10 to 12, and the connectivity of node 2 increases from 8 to 9. This shows that the algorithm of the present invention has obvious advantages in processing node relationships and displaying complexity, and can better reflect the relationship between nodes.

综合重要性指数K:本发明明显高于现有技术,节点1的指数从1.48增加到2.63,节点2的指数从1.22增加到2.15,这进一步验证了本发明在综合考虑点击次数、查看时长和节点连接度后,能够提供更准确和有效的展示效果;Comprehensive importance index K: The present invention is significantly higher than the prior art. The index of node 1 increases from 1.48 to 2.63, and the index of node 2 increases from 1.22 to 2.15. This further verifies that the present invention can provide a more accurate and effective display effect after comprehensively considering the number of clicks, viewing time, and node connectivity.

综合以上分析,本发明通过动态调整弹窗轮播逻辑和优化关系图展示,不仅提高了数据展示的灵活性和交互性,还能够更有效地吸引用户注意力,增强数据的可视化效果。Based on the above analysis, the present invention not only improves the flexibility and interactivity of data display, but also can more effectively attract user attention and enhance the visualization effect of data by dynamically adjusting the pop-up carousel logic and optimizing the relationship diagram display.

通过对弹窗轮播逻辑的可配置功能可以灵活性的实现用户对展示内容的要求,通过ECharts组件的可视化功能,将需要展示的内容和效果动态的展示出来以达到更好的展示效果,该算法可广泛应用于电力系统监控领域,提高电力系统指标的展示形式。The configurable function of the pop-up carousel logic can flexibly meet the user's requirements for display content. Through the visualization function of the ECharts component, the content and effects to be displayed can be dynamically displayed to achieve better display effects. This algorithm can be widely used in the field of power system monitoring to improve the display form of power system indicators.

应说明的是,以上实施例仅用以说明本发明的技术方案而非限制,尽管参照较佳实施例对本发明进行了详细说明,本领域的普通技术人员应当理解,可以对本发明的技术方案进行修改或者等同替换,而不脱离本发明技术方案的精神和范围,其均应涵盖在本发明的权利要求范围当中。It should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention, which should all be included in the scope of the claims of the present invention.

Claims (10)

Translated fromChinese
1.基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于,包括以下步骤:1. The relationship diagram pop-up carousel logic algorithm based on the ECharts component is characterized by including the following steps:S1:确定关系图的展现形式;S1: Determine the presentation format of the relationship diagram;S2:根据展示内容确定关系图展示的节点数据和节点之间的关系数据以及两个节点的关系类型,构建关系复杂度计算公式;S2: Determine the node data displayed in the relationship graph, the relationship data between the nodes, and the relationship type between the two nodes according to the displayed content, and construct a relationship complexity calculation formula;S3:将数据接口采集到的数据通过通信网络传输到数据处理中心;S3: Transmitting the data collected by the data interface to the data processing center through the communication network;S4:通过关系图算法将弹窗的轮播逻辑进行配置,并构建节点权重计算公式;S4: Configure the pop-up carousel logic through the relationship graph algorithm and build a node weight calculation formula;S5:按照配置的算法进行弹窗轮播。S5: Perform pop-up carousel according to the configured algorithm.2.根据权利要求1所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:所述节点权重计算公式如下:;其中,表示总的节点数量,表示第i个节点,i=1,2,3,...,N,表示节点的权重,表示节点的重要性,表示节点的第k个指标得分,M表示节点的指标总数。2. According to the ECharts component-based relationship diagram pop-up carousel logic algorithm of claim 1, it is characterized in that: the node weight calculation formula is as follows: ;in, Represents the total number of nodes, represents the i-th node, i=1, 2, 3, ..., N, Representation Node The weight represents the importance of the node. Representation Node The kth index score of The total number of indicators.3.根据权利要求2所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:在节点权重计算公式的输出结果中,设定节点权重阈值为;若,则该节点为重要节点,要在后续的轮播逻辑中重点展示;若,则该节点为非重要节点,无需在后续的轮播逻辑中重点展示。3. According to the ECharts component-based relationship diagram pop-up carousel logic algorithm of claim 2, it is characterized in that: in the output result of the node weight calculation formula, the node weight threshold is set to ;like , then the node is an important node and should be highlighted in the subsequent carousel logic; if , then the node is a non-important node and does not need to be highlighted in the subsequent carousel logic.4.根据权利要求1所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:所述关系复杂度计算公式如下:;其中,表示节点之间的关系复杂度,表示节点之间第j个关系度量,J表示节点之间关系度量的总数。4. According to the ECharts component-based relationship diagram pop-up carousel logic algorithm of claim 1, it is characterized in that: the relationship complexity calculation formula is as follows: ;in, Representation Node and The complexity of the relationship between Representation Node and is the jth relationship metric between nodes, and J represents the total number of relationship metrics between nodes.5.根据权利要求4所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:在关系复杂度计算公式的输出结果中,设定复杂度阈值;若,则表示节点之间关系复杂度高,要在关系图中采用直观的展示方式;若,则表示节点之间关系复杂度低,无需在关系图中直接展示。5. The ECharts component-based relationship diagram pop-up carousel logic algorithm according to claim 4 is characterized in that: in the output result of the relationship complexity calculation formula, a complexity threshold is set ;like , it means that the relationship between nodes is complex and an intuitive display method should be used in the relationship diagram; if , it means that the complexity of the relationship between nodes is low and there is no need to display it directly in the relationship diagram.6.根据权利要求4所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:根据关系复杂度计算公式的输出结果和节点权重计算公式的输出结果构建节点显示时间调整公式,所述节点显示时间调整公式如下:其中,表示节点的显示时间,表示节点在轮播中的展示时间,表示基于关系复杂度的衰减因子随着关系复杂度的增加,衰减因子减少,表示控制衰减速率。6. According to the ECharts component-based relationship diagram pop-up carousel logic algorithm of claim 4, it is characterized by: constructing a node display time adjustment formula according to the output result of the relationship complexity calculation formula and the output result of the node weight calculation formula, and the node display time adjustment formula is as follows: in, Representation Node The display time indicates the display time of the node in the carousel. Represents the decay factor based on the complexity of the relationship as the complexity of the relationship increases As the attenuation factor decreases, Indicates the control decay rate.7.根据权利要求6所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:在节点显示调整公式的输出结果中,设定节点显示时间阈值;若,则需要增加该节点的展示时间;若,无需增加该节点的展示时间。7. The ECharts component-based relationship diagram pop-up carousel logic algorithm according to claim 6 is characterized in that: in the output result of the node display adjustment formula, a node display time threshold is set ;like , then you need to increase the display time of the node; if , there is no need to increase the display time of the node.8.根据权利要求6所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:根据节点显示时间调整公式的输出结果构建轮播速度调整公式,所述轮播速度调整公式如下:其中,表示轮播速度调整函数,表示在时间t时的轮播速度,为逻辑函数,用于控制速度变化的平滑度,参数决定速度调整的灵敏度,表示轮播周期总时长。8. According to the ECharts component-based relationship diagram pop-up carousel logic algorithm of claim 6, it is characterized in that: a carousel speed adjustment formula is constructed according to the output result of the node display time adjustment formula, and the carousel speed adjustment formula is as follows: in, represents the carousel speed adjustment function, which represents the carousel speed at time t. is a logic function used to control the smoothness of speed changes. Determines the sensitivity of the speed adjustment, Indicates the total duration of the carousel cycle.9.根据权利要求8所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:在轮播速度调整公式的输出结果中,设定轮播速度阈值上限和阈值下限;若,需要减缓轮播速度;若;无需调整轮播速度;若,则需要提高轮播速度。9. The ECharts component-based relationship diagram pop-up carousel logic algorithm according to claim 8, characterized in that: in the output result of the carousel speed adjustment formula, an upper limit of the carousel speed threshold is set and lower threshold ;like , you need to slow down the carousel speed; if ; No need to adjust the carousel speed; if , you need to increase the carousel speed.10.根据权利要求2所述的基于ECharts组件的关系图弹窗轮播逻辑算法,其特征在于:所述指标得分包括用户点击次数、查看时长和节点的连接度。10. The relationship diagram pop-up carousel logic algorithm based on the ECharts component according to claim 2 is characterized in that: the indicator score includes the number of user clicks, viewing time and node connectivity.
CN202411248735.6A2024-09-062024-09-06 Relationship diagram pop-up carousel logic algorithm based on ECharts componentActiveCN118778848B (en)

Priority Applications (1)

Application NumberPriority DateFiling DateTitle
CN202411248735.6ACN118778848B (en)2024-09-062024-09-06 Relationship diagram pop-up carousel logic algorithm based on ECharts component

Applications Claiming Priority (1)

Application NumberPriority DateFiling DateTitle
CN202411248735.6ACN118778848B (en)2024-09-062024-09-06 Relationship diagram pop-up carousel logic algorithm based on ECharts component

Publications (2)

Publication NumberPublication Date
CN118778848Atrue CN118778848A (en)2024-10-15
CN118778848B CN118778848B (en)2024-12-06

Family

ID=92986504

Family Applications (1)

Application NumberTitlePriority DateFiling Date
CN202411248735.6AActiveCN118778848B (en)2024-09-062024-09-06 Relationship diagram pop-up carousel logic algorithm based on ECharts component

Country Status (1)

CountryLink
CN (1)CN118778848B (en)

Citations (3)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
US20200364901A1 (en)*2019-05-162020-11-19Qualcomm IncorporatedDistributed pose estimation
WO2023273407A1 (en)*2021-07-012023-01-05稿定(厦门)科技有限公司Method and apparatus for generating page component
US20230045414A1 (en)*2021-08-032023-02-09Transportation Ip Holdings, LlcVehicle Braking Control System

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
US20200364901A1 (en)*2019-05-162020-11-19Qualcomm IncorporatedDistributed pose estimation
WO2023273407A1 (en)*2021-07-012023-01-05稿定(厦门)科技有限公司Method and apparatus for generating page component
US20230045414A1 (en)*2021-08-032023-02-09Transportation Ip Holdings, LlcVehicle Braking Control System

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
宋雅: "基于Web的大屏数据可视化系统的研究与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》, no. 5, 15 May 2021 (2021-05-15), pages 138 - 665*
技术领航员: "android 多弹窗先后安卓应用弹窗", pages 1 - 17, Retrieved from the Internet <URL:https://blog.51.cto.com/u_16099215/6593922>*

Also Published As

Publication numberPublication date
CN118778848B (en)2024-12-06

Similar Documents

PublicationPublication DateTitle
US20170126594A1 (en)Aggregation and visualization of multiple chat room information
Shi et al.1.5 D egocentric dynamic network visualization
US20250219984A1 (en)Message Display Method and Apparatus, Terminal, and Computer-Readable Storage Medium
CN106953887A (en) A fine-grained radio audio content personalized organization recommendation method
Liu et al.EgoNetCloud: Event-based egocentric dynamic network visualization
CN106157155A (en)Social media information based on map metaphor propagates visual analysis method and system
JP2011512600A5 (en)
JP2012003244A (en)Method for performing intelligent filtering operation to determine render status in screen sharing system
CN110263281A (en)The adaptive device and method of page resolution in a kind of exploitation of data visualization
CN109819268A (en)Direct broadcasting room control method for playing back, device, medium and equipment in net cast
CN117707370A (en)Page interaction method, device, equipment and storage medium
CN103150172B (en)A kind of method and apparatus realizing individual scene
WO2015096358A1 (en)Webpage layout method and apparatus
Luo et al.Fractal information dissemination and clustering evolution on social hypernetwork
US10395412B2 (en)Morphing chart animations in a browser
CN118778848A (en) Relationship diagram pop-up carousel logic algorithm based on ECharts component
CN101329770A (en) Method of automatic generation of Chinese ink painting animation based on water flow structure diagram
Riche et al.Hard-to-use interfaces considered beneficial (some of the time)
CN110888695A (en)Method and device for generating page based on permission
WO2024213034A1 (en)Community message interaction method and apparatus, and electronic device and storage medium
CN117785165A (en)Chart generation method and device based on large model and electronic equipment
CN109657139A (en)Analogy method, device and the equipment that network event is propagated
WO2024007655A1 (en)Social processing method and related device
CN107544953A (en)XBRL data acquisitions and display systems based on jqGrid
US9847101B2 (en)Video storytelling based on conditions determined from a business object

Legal Events

DateCodeTitleDescription
PB01Publication
PB01Publication
SE01Entry into force of request for substantive examination
SE01Entry into force of request for substantive examination
GR01Patent grant
GR01Patent grant

[8]ページ先頭

©2009-2025 Movatter.jp