Word carousel method, device, equipment and storage medium

Abstract

The present invention relates to the field of big data technology, and discloses a word carousel method, device, equipment and storage medium. The method comprises: obtaining keywords to be displayed, and converting the keywords into chart data of a preset chart data structure; based on the chart data, constructing a plurality of corresponding line graphs according to a preset chart display style, and dynamically configuring each line graph according to the display order of each keyword; and sequentially rolling and carousing each dynamically configured line graph to sequentially display the keywords currently rotated to the line graph during the circular carousel process. The present invention realizes the circular carousel of the real-time pulse of keywords, and improves the display flexibility of the keyword circular carousel.

Description

Technical Field

[0001] The present invention relates to the field of big data technology, and in particular to a word carousel method, device, equipment and storage medium. Background Art

[0002] In the era of big data, data statistics have become a very important trend guide in all walks of life, such as counting the number of visits to a certain online product today, such as counting the popular search keywords on a certain social platform, thereby deriving Baidu hot searches, Weibo hot searches, etc., but also including search statistics of government systems, statistics of user search keywords and key words.

[0003] As for the display of keywords in the existing technology, the hot search list and real-time pulse (keyword loop carousel) generated by the heat value, from the technical implementation, the real-time pulse carousel of the hot search page is realized by SVG (Scalable Vector Graphics) animation effect to display the corresponding keywords. However, due to the problem of complex functional architecture design based on SVG design, the flexibility of keyword loop carousel display is low. Summary of the invention

[0004] The main purpose of the present invention is to solve the technical problem that the functional architecture design of the existing word loop carousel is relatively complex, resulting in low flexibility in the display of the word loop carousel.

[0005] A first aspect of the present invention provides a word carousel method, comprising: obtaining keywords to be displayed, and converting the keywords into chart data of a preset chart data structure; based on the chart data, constructing a corresponding plurality of line graphs according to a preset chart display style, and dynamically configuring each of the line graphs according to the display order of each of the keywords; and scrolling and carouseling each of the dynamically configured line graphs in turn, so as to display the keywords currently rotated into the line graph in turn during the cyclic carousel process.

[0006] Optionally, in a first implementation method of the first aspect of the present invention, constructing corresponding multiple line graphs based on the chart data in accordance with a preset chart display style includes: determining a parent component, a first child component, and a second child component corresponding to the preset chart display style; based on the chart data, instantiating the parent component to obtain a placeholder width pixel of the keyword in the chart; based on the placeholder width pixel, instantiating the first child component to obtain a first line graph, and instantiating the second child component to obtain a second line graph, wherein the multiple line graphs include at least one first line graph and at least one second line graph.

[0007] Optionally, in a second implementation method of the first aspect of the present invention, the instantiation of the parent component based on the chart data to obtain the placeholder width pixels of the keywords in the chart includes: instantiating the parent component based on the chart data, and judging, based on the instantiation result, whether the number of keywords is in a preset first word number interval or a second word number interval; if in the first word number interval, calculating the first placeholder width pixels of the keywords in the chart based on the number of keywords and the preset current visible width pixels; if in the second word number interval, calculating the second placeholder width pixels of the keywords in the chart based on the number of keywords and the preset maximum supported width pixels, wherein the placeholder width pixels include first placeholder pixels and second placeholder width pixels.

[0008] Optionally, in a third implementation method of the first aspect of the present invention, the first subcomponent is instantiated according to the placeholder width pixel to obtain a first line graph, and the second subcomponent is instantiated to obtain a second line graph, including: if the placeholder width pixel is a first placeholder width pixel, then based on the first placeholder width pixel, a first line graph is constructed using the first subcomponent using all keywords, and a second line graph is constructed using the second subcomponent using all the keywords.

[0009] Optionally, in a fourth implementation manner of the first aspect of the present invention, the first subcomponent is instantiated according to the placeholder width pixel to obtain a first line graph, and the second subcomponent is instantiated to obtain a second line graph, including: if the placeholder width pixel is a second placeholder width pixel, all keywords are divided into N groups of words according to the display order of the keywords and the preset number of visible words of the keywords; based on the first placeholder width pixel, a first line graph is constructed by the first subcomponent using the i-th group of words, and a second line graph is constructed by the second subcomponent using the j-th group of words, wherein N is a positive integer, i is an odd number in N, and j is an even number in N.

[0010] Optionally, in a fifth implementation of the first aspect of the present invention, the dynamic configuration of each of the line graphs according to the display order of each of the keywords includes: locating the first key frame where the first keyword is displayed in the first line graph and the second line graph, and the second key frame where the second keyword is displayed; configuring the dynamic attribute parameters of the first line graph according to the first key frame and the second key frame of the first line graph, and configuring the second dynamic attribute parameters of the second line graph according to the first key frame and the second key frame of the second line graph; dynamically splicing the first line graph and the second line graph according to the second key frame of the first line graph and the first key frame of the second line graph, or a key frame of the second line graph and the second key frame of the second line graph.

[0011] Optionally, in a sixth implementation method of the first aspect of the present invention, the converting of the keywords into chart data of a preset chart data structure includes: extracting interface key value attributes and interface parameter values ​​in the keywords, and obtaining corresponding chart key value attributes and chart parameter values ​​according to the preset chart data structure; corresponding the interface key value attributes to the chart key value attributes, and corresponding the interface parameter values ​​to the chart parameter values, to obtain chart data.

[0012] The second aspect of the present invention provides a word carousel device, including: a conversion module, used to obtain keywords to be displayed, and convert the keywords into chart data of a preset chart data structure; a configuration module, used to construct corresponding multiple line graphs based on the chart data according to a preset chart display style, and dynamically configure each of the line graphs according to the display order of each of the keywords; a carousel module, used to scroll and carousel each of the dynamically configured line graphs in turn, so as to display the keywords currently rotated to the line graph in turn during the cyclic carousel process.

[0013] Optionally, in a first implementation method of the second aspect of the present invention, the configuration module includes: a determination unit, used to determine a parent component, a first subcomponent, and a second subcomponent corresponding to a preset chart display style; a first instance unit, used to instantiate the parent component based on the chart data to obtain the placeholder width pixels of the keyword in the chart; a second instance unit, used to instantiate the first subcomponent according to the placeholder width pixels to obtain a first line chart, and to instantiate the second subcomponent to obtain a second line chart, wherein the multiple line charts include at least one first line chart and at least one second line chart.

[0014] Optionally, in a second implementation method of the second aspect of the present invention, the first instance unit is also used to: instantiate the parent component based on the chart data, and judge whether the number of keywords is in a preset first word number interval or a second word number interval according to the instantiation result; if it is in the first word number interval, then calculate the first placeholder width pixel of the keyword in the chart according to the number of keywords and the preset current visible width pixels; if it is in the second word number interval, then calculate the second placeholder width pixel of the keyword in the chart according to the number of keywords and the preset maximum supported width pixels, wherein the placeholder width pixels include first placeholder pixels and second placeholder width pixels.

[0015] Optionally, in a third implementation method of the second aspect of the present invention, the second instance unit is also used for: if the placeholder width pixel is a first placeholder width pixel, based on the first placeholder width pixel, constructing a first line graph through the first subcomponent using all keywords, and constructing a second line graph through the second subcomponent using all keywords.

[0016] Optionally, in a fourth implementation method of the second aspect of the present invention, the second instance unit is further used for: if the placeholder width pixel is a second placeholder width pixel, dividing all keywords into N groups of words according to the display order of the keywords and the preset number of visible words of the keywords; based on the first placeholder width pixel, constructing a first line graph through the first subcomponent using the i-th group of words, and constructing a second line graph through the second subcomponent using the j-th group of words, wherein N is a positive integer, i is an odd number in N, and j is an even number in N.

[0017] Optionally, in a fifth implementation of the second aspect of the present invention, the configuration module includes: a positioning unit, used to locate the first key frame where the first keyword display position is located in the first line graph and the second line graph, and the second key frame where the second keyword display position is located; a configuration unit, used to configure the dynamic attribute parameters of the first line graph according to the first key frame and the second key frame of the first line graph, and to configure the second dynamic attribute parameters of the second line graph according to the first key frame and the second key frame of the second line graph; a splicing unit, used to dynamically splice the first line graph and the second line graph according to the second key frame of the first line graph and the first key frame of the second line graph, or a key frame of the second line graph and the second key frame of the second line graph.

[0018] Optionally, in a sixth implementation method of the second aspect of the present invention, the conversion module includes: an extraction unit, used to extract interface key value attributes and interface parameter values ​​in the keywords, and obtain corresponding chart key value attributes and chart parameter values ​​according to a preset chart data structure; a corresponding unit, used to correspond the interface key value attributes to the chart key value attributes, and correspond the interface parameter values ​​to the chart parameter values, to obtain chart data.

[0019] The third aspect of the present invention provides a word carousel device, comprising: a memory and at least one processor, wherein the memory stores instructions; the at least one processor calls the instructions in the memory to enable the word carousel device to execute the above-mentioned word carousel method.

[0020] A fourth aspect of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the above-mentioned word rotation method.

[0021] In the technical solution provided by the present invention, a line chart such as ECharts is used as a basis, and then the line chart is dynamically presented using methods such as CSS to achieve the effect of a circular carousel. The display of keywords can be presented to users not only in the form of a list or table, but also in the form of an infinitely scrolling dynamic effect of a chart, so that the functional architecture design of the keyword circular carousel is more concise and the subsequent configurability is high, thereby improving the flexibility of the keyword circular carousel display. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 This is a schematic diagram of a first embodiment of a word carousel method in an embodiment of the present invention;

[0023] Figure 2 Schematic diagram of a second embodiment of the word carousel method in an embodiment of the present invention;

[0024] Figure 3 Schematic diagram of a third embodiment of the word carousel method in an embodiment of the present invention;

[0025] Figure 4 A schematic diagram of an embodiment of a word carousel device in an embodiment of the present invention;

[0026] Figure 5 It is a schematic diagram of another embodiment of the word carousel device in the embodiment of the present invention;

[0027] Figure 6 Schematic diagram of an embodiment of a word carousel device in an embodiment of the present invention. DETAILED DESCRIPTION

[0028] The embodiment of the present invention provides a word carousel method, device, equipment and storage medium, which obtains keywords to be displayed and converts the keywords into chart data of a preset chart data structure; based on the chart data, a corresponding plurality of line graphs are constructed according to the preset chart display style, and each line graph is dynamically configured according to the display order of each keyword; each dynamically configured line graph is sequentially scrolled and caroused, so as to sequentially display the keywords currently rotated to the line graph in the process of circular carousel. The present invention realizes the circular carousel of the real-time pulse of keywords and improves the display flexibility of the keyword circular carousel.

[0029] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "including" or "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0030] For ease of understanding, the specific process of the embodiment of the present invention is described below. Figure 1 The first embodiment of the word carousel method in the embodiment of the present invention includes:

[0031] 101. Obtain keywords to be displayed, and convert the keywords into chart data of a preset chart data structure;

[0032] It is understandable that the execution subject of the present invention may be a word carousel device, or a terminal or a server, which is not limited here. The embodiment of the present invention is described by taking a server as the execution subject as an example.

[0033] In this embodiment, different business platforms have their own keyword statistics, which can be search keywords that appear frequently in the same business platform, or search keywords that appear frequently in statistics of multiple business platforms, which are not specifically limited here. According to the hot search keywords counted, they are displayed on the hot search list. Specific examples of keywords to be displayed include: keywords of hot search products on shopping platforms, keywords of hot search browsing on search engines, keywords of hot search questions and answers in government affairs systems, etc., which are not listed one by one here.

[0034] In this embodiment, the keyword is first converted from a plain text data structure to chart data with a chart data structure. The chart data structure here can be a line chart, such as an ECharts chart data structure, and the chart data can include the chart format code and coordinate information of each keyword, such as (hot search ranking, statistics) as the (x, y) coordinate value of the corresponding keyword.

[0035] 102. Based on the chart data, construct a plurality of corresponding line charts according to a preset chart display style, and dynamically configure each of the line charts according to the display order of each of the keywords;

[0036] In this embodiment, after converting the chart data of the keywords, a line chart can be constructed according to the pre-set chart display style, such as the keyword placeholder pixel width, font size, color, line display method, etc., to produce a static display effect of the line chart of the keyword carousel. Specifically, the line chart can be constructed using the Canvas drawing paper of ECharts.

[0037] Specifically, in a blank Canvas drawing, you can use the left and bottom as the x-axis and y-axis respectively to build a two-dimensional coordinate system, and then determine the position of the keyword in the line graph according to the hot search ranking and search statistics corresponding to each keyword, represent it with points, and connect them with straight lines or smooth lines to build a line graph.

[0038] After constructing multiple line graphs corresponding to keywords with static display effects, you can add scrolling and looping carousels to the line graph ECharts through CSS styles. In order to add scrolling and looping carousel effects to line graphs, at least two line graphs need to be set, such as the first line graph and the second line graph. When the first line graph starts to scroll away from the current display screen, the second line graph needs to be seamlessly connected to the first line graph and displayed on the current display screen. When the second line graph starts to scroll away from the current display screen, the first line graph seamlessly connects to the second line graph and displays it on the current display screen, and so on.

[0039] Specifically, you can use "animation:mymove2 80s infinite linear" to add dynamic effects to the line chart, where Animation means adding animation properties to the line chart, mymove is the animation name, 80s means the animation plays for 80 seconds at a time, infinite means the number of plays is infinite, and linear means the animation plays at a constant speed during these 80 seconds.

[0040] In addition, @keyframes mymove1 and @keyframes mymove2 can be used to define the dynamic display of the key frames of the connection part of the first line graph and the second line graph. The execution process of the first line graph is: 0% {transform:translate(0), translateZ(0);}; 100% {transform:translate(-100%) translateZ(0); The execution process of the second line graph is: 0% {transform:translate(100%) translateZ(0);}; 100% {transform:translate(0) translateZ(0);

[0041] 103. The dynamically configured line graphs are sequentially scrolled and rotated, so as to sequentially display the keywords currently rotated in the line graph during the circular rotation process.

[0042] In this embodiment, after the dynamic effect of the line graph is configured, the line graph is scrolled and displayed, and keywords are displayed. When a keyword is clicked, the name of the currently clicked keyword is obtained, and the toEchartsWord() method of js is executed. Then, when this method is executed, the currently scrolled chart is immediately paused, and the animation time is set to 0s; the X-axis data passed from the parent component to the child component is assigned to xAxisdataNew2, and the discount chart data passed from the parent component to the child component is assigned to yAxisData to find the subscript of the currently clicked keyword in the keyword array; if the subscript is not 0, that is, not in the first position, the currently clicked word must be placed in the first position according to the normal rotation order, and the line graph data set is also rearranged according to the order of the x-axis; it has been verified that highlighting the selected keyword in the second position of the visible area of ​​the chart is more conspicuous, so here the last word of the newly combined set is copied to the first position, that is, the first and last positions are the same word as the last one, and the corresponding data is the same. The speed of the line graph scrolling depends on the length of the current keyword array set.

[0043] In addition, when the mouse moves into the visible range of the scrolling graph (including but not limited to keywords and shadows), the scrolling effect stops. Clicking a keyword or clicking the visible range of the scrolling graph will automatically calculate and locate the nearest hot word nearby. The scrolling graph will continue to run when the mouse moves out of the range.

[0044] In addition, when filtering keywords, you can support filtering by day, month, and quarter. There is currently no third-party component available on the market for filtering quarterly components. In order to solve the problem of quarterly filtering, this solution is based on the filtering of months in the DatePicker date selector of elementUI, and secondary development is carried out based on its source code to achieve filtering of quarters.

[0045] In an embodiment of the present invention, a line chart such as ECharts is used as a basis, and then the line chart is dynamically presented using methods such as CSS to achieve a circular carousel effect. Keywords can be presented to users not only in the form of a list or table, but also in the form of an infinitely scrolling dynamic effect of a chart, making the functional architecture design of the keyword circular carousel more concise and highly configurable subsequently, thereby improving the flexibility of the keyword circular carousel display.

[0046] See also Figure 2 The second embodiment of the word carousel method in the embodiment of the present invention includes:

[0047] 201. Obtain keywords to be displayed, extract interface key attributes and interface parameter values ​​in the keywords, and obtain corresponding chart key attributes and chart parameter values ​​according to a preset chart data structure;

[0048] 202. Correspond the interface key attribute to the chart key attribute, and correspond the interface parameter value to the chart parameter value, to obtain chart data;

[0049] In this embodiment, the acquisition of keywords can be obtained by requesting a third-party interface, or indirectly requested through a background interface docking service. Among them, the interface key value attributes may include {"keyword name", "keyword hot search ranking", "keyword search volume"}, etc., and the corresponding interface parameter values ​​may be {"digital platform", "4", "200 (unit: ten thousand)"}, etc.

[0050] In addition, in the chart data structure, the chart key attributes may include {"annotation display", "x-axis coordinate", "y-axis coordinate"}, etc., and the corresponding chart parameter values ​​may include {"digital platform", "4", "5"}, which may correspond to the interface key attributes and interface parameter values ​​respectively, converting the keyword-related statistical data into the line chart information to be constructed and recorded as chart data. That is, the key value of the interface key attribute corresponds to the key value of the chart key attribute, and the value of the interface parameter value corresponds to the value of the chart parameter value.

[0051] 203. Determine a parent component, a first subcomponent, and a second subcomponent corresponding to a preset chart display style, and instantiate the parent component based on the chart data to obtain a placeholder width in pixels of the keyword in the chart;

[0052] 204. Instantiate the first subcomponent according to the placeholder width pixels to obtain a first line graph, and instantiate the second subcomponent to obtain a second line graph, wherein the plurality of line graphs include at least one first line graph and at least one second line graph;

[0053] In this embodiment, ECharts can be used to pre-build a vue parent component FatherComponent.vue with a preset chart display style, and two vue subcomponents corresponding to the first subcomponent and the second subcomponent: EchartsLineRun.vue. Among them, the placeholder width pixels of the chart obtained by instantiating the vue parent component refer to the interval between the keywords at each point in the line chart.

[0054] In addition, two echarts are defined so that the last keyword of the first echarts chart and the first keyword of the second echarts chart can be seamlessly spliced ​​during the loop carousel process, so as to achieve a dynamic carousel effect in which the keywords scroll according to the pulse.

[0055] 205. Locate a first key frame where the first keyword display position is located in the first line graph and the second line graph, and a second key frame where the second keyword display position is located;

[0056] 206. According to the first key frame and the second key frame of the first line graph, configure the dynamic attribute parameters of the first line graph, and according to the first key frame and the second key frame of the second line graph, configure the second dynamic attribute parameters of the second line graph;

[0057] 207. Dynamically splicing the first line graph and the second line graph according to the second key frame of the first line graph and the first key frame of the second line graph, or a key frame of the second line graph and the second key frame of the second line graph;

[0058] In this embodiment, the first key frame refers to one or more rows of pixel frames where the first keyword in the first line graph and the second line graph is located, and the second key frame refers to one or more rows of pixel frames where the last keyword in the first line graph and the second line graph is located.

[0059] For the first line graph to the last first line graph / second line graph in the sequential carousel, the second key frame of the first line graph and the first key frame of the second line graph are spliced ​​to make the two line graphs seamlessly connected to achieve a dynamic scrolling carousel effect; for the last first line graph / second line graph to the first first line graph, a key frame of the second line graph and the second key frame of the second line graph are spliced ​​to achieve a dynamic scrolling carousel effect of returning from the last line graph carousel to the first line graph.

[0060] That is, when the first echarts chart finishes scrolling from the current visible area, it is immediately appended to the second echarts chart, that is, the last keyword of the second echarts chart is seamlessly spliced ​​with the first keyword of the first echarts chart, and so on, to achieve the effect of circularly rotating keywords in the line chart. Furthermore, in order to ensure that the first and last positions of the chart can be seamlessly spliced, the first and last positions can be further set to the same keyword, that is, both are the first keyword.

[0061] 208. Scroll and rotate the dynamically configured line graphs in sequence, so as to sequentially display the keywords currently rotated in the line graph in the process of circular rotation.

[0062] In an embodiment of the present invention, keywords to be displayed are obtained and converted into chart data of a preset chart data structure; based on the chart data, corresponding multiple line graphs are constructed according to the preset chart display style, and each line graph is dynamically configured according to the display order of each keyword; each dynamically configured line graph is scrolled and carouseled in turn to display the keywords currently rotated to the line graph in turn during the circular carousel process, thereby realizing a circular carousel of the real-time pulse of the keywords and improving the display flexibility of the keyword circular carousel.

[0063] See also Figure 3 The third embodiment of the word carousel method in the embodiment of the present invention includes:

[0064] 301. Acquire keywords to be displayed, and convert the keywords into chart data of a preset chart data structure;

[0065] 302. Determine a parent component, a first subcomponent, and a second subcomponent corresponding to a preset chart display style;

[0066] 303. Instantiate the parent component based on the chart data, and determine, according to the instantiation result, whether the number of keywords is within a preset first word number interval or a second word number interval;

[0067] 304. If it is in the first word quantity interval, then calculate the first placeholder width pixel of the keyword in the chart according to the number of keywords and the preset current visible width pixel;

[0068] 305. If it is in the second word quantity interval, calculate the second placeholder width pixel of the keyword in the chart according to the number of keywords and the preset maximum supported width pixel;

[0069] In this embodiment, the placeholder width pixels of each keyword in the calculation chart, that is, the display spacing of each keyword, are determined based on the number of keywords. The first word number interval is when the number of keywords is less than or equal to the visible width pixels of the screen, corresponding to the first method of calculating the placeholder width pixels, and the first placeholder width pixels are obtained; the second word number interval is when the number of keywords is greater than the visible width pixels of the screen but less than the maximum width pixels that can be supported, corresponding to the second method of calculating the placeholder width pixels, and the second placeholder width pixels are obtained.

[0070] Specifically, define the Vue parent component: FatherComponent.vue, and then use the Js method: newWidth() to calculate the corresponding placeholder width in pixels according to the number of keywords. For example, newWidth(wordEchartsData.xAxisdata.length)", if the first word number interval is 1-7, and the second word number interval is 8-100, then when judging whether the number of keywords is in the first word number interval and the second word number interval, the following method can be executed:

[0071]

[0072]

[0073] If there are less than 8 keywords, the total width of the placeholder is equal to the current visible width, and the first placeholder width of each keyword is equal to the current visible width divided by the number of keywords. According to prior knowledge, for example, due to browser performance reasons, the maximum supported width is 15000px, and then the width allocated to each keyword is equal to 15000px divided by the number of keywords. If there are more than 100 hot words, the placeholder width of each keyword is 150 pixels.

[0074] 306. If the placeholder width pixel is a first placeholder width pixel, based on the first placeholder width pixel, construct a first line graph using all the keywords through the first subcomponent, and construct a second line graph using all the keywords through the second subcomponent;

[0075] 307. If the placeholder width pixel is the second placeholder width pixel, all the keywords are divided into N groups of words according to the display order of the keywords and the preset number of visible words of the keywords;

[0076] 308. Based on the first placeholder width pixels, construct a first line graph using the i-th group of words through the first subcomponent, and construct a second line graph using the j-th group of words through the second subcomponent, wherein N is a positive integer, i is an odd number in N, and j is an even number in N;

[0077] In this embodiment, if the placeholder width pixels of the keyword in the chart are represented as the first placeholder width pixels, all the keywords to be displayed are directly used to construct the first line graph and the second line graph respectively, and the subsequent keyword carousel display cycles between the two first line graphs and the second line graph.

[0078] If the placeholder width pixels of the keywords in the chart are represented as the second placeholder width pixels, the current visible page of the screen cannot display all the keywords. In this case, all the keywords are grouped according to the number of visible words on the screen. For example, if there are 70 keywords to be displayed and the number of visible words is 7, all the keywords can be divided into 10 groups of words, among which the 1st, 3rd, 5th and 7th groups of words (the i-th group of words) construct the first line graph, and the 2nd, 4th and 6th groups of words (the j-th group of words) construct the second line graph, that is, the first line graph and the second line graph are cross-constructed.

[0079] When building, you can define the first and second line charts through div class="echart-box flag" and div class="echart-box2 flag", and use <div class＝”echart”:style＝”{width}”ref＝”echarts”>and <div class＝”echart”:style＝”{width}”ref＝”echarts2”>Performs line chart construction and applies the preceding placeholder width in pixels.

[0080] 309. Dynamically configure each of the line graphs according to the display order of each of the keywords;

[0081] 310. Scroll and rotate the dynamically configured line graphs in sequence, so as to sequentially display the keywords currently rotated in the line graph in the process of circular rotation.

[0082] In an embodiment of the present invention, keywords to be displayed are obtained and converted into chart data of a preset chart data structure; based on the chart data, corresponding multiple line graphs are constructed according to the preset chart display style, and each line graph is dynamically configured according to the display order of each keyword; each dynamically configured line graph is scrolled and carouseled in turn to display the keywords currently rotated to the line graph in turn during the circular carousel process, thereby realizing a circular carousel of the real-time pulse of the keywords and improving the display flexibility of the keyword circular carousel.

[0083] The above describes the word carousel method in the embodiment of the present invention. The following describes the word carousel device in the embodiment of the present invention. Figure 4 In one embodiment of the present invention, a word carousel device includes:

[0084] The conversion module 401 is used to obtain keywords to be displayed and convert the keywords into chart data of a preset chart data structure;

[0085] Configuration module 402, for constructing a plurality of corresponding line graphs according to a preset chart display style based on the chart data, and dynamically configuring each of the line graphs according to the display order of each of the keywords;

[0086] The carousel module 403 is used to sequentially perform a rolling carousel on the dynamically configured line graphs, so as to sequentially display the keywords currently rotated in the line graph during the circular carousel process.

[0087] In an embodiment of the present invention, a line chart such as ECharts is used as a basis, and then the line chart is dynamically presented using methods such as CSS to achieve a circular carousel effect. Keywords can be presented to users not only in the form of a list or table, but also in the form of an infinitely scrolling dynamic effect of a chart, making the functional architecture design of the keyword circular carousel more concise and highly configurable subsequently, thereby improving the flexibility of the keyword circular carousel display.

[0088] See also Figure 5 Another embodiment of the word carousel device in the embodiment of the present invention includes:

[0089] The conversion module 401 is used to obtain keywords to be displayed and convert the keywords into chart data of a preset chart data structure;

[0090] Configuration module 402, for constructing a plurality of corresponding line graphs according to a preset chart display style based on the chart data, and dynamically configuring each of the line graphs according to the display order of each of the keywords;

[0091] The carousel module 403 is used to sequentially perform a rolling carousel on the dynamically configured line graphs, so as to sequentially display the keywords currently rotated in the line graph during the circular carousel process.

[0092] Specifically, the configuration module 402 includes:

[0093] A determination unit 4021 is used to determine a parent component, a first subcomponent, and a second subcomponent corresponding to a preset chart display style;

[0094] The first instantiation unit 4022 is used to instantiate the parent component based on the chart data to obtain the placeholder width in pixels of the keyword in the chart;

[0095] The second instance unit 4023 is used to instantiate the first subcomponent according to the occupied width pixels to obtain a first line graph, and to instantiate the second subcomponent to obtain a second line graph, wherein the multiple line graphs include at least one first line graph and at least one second line graph.

[0096] Specifically, the first instance unit 4022 is further used for:

[0097] Based on the chart data, the parent component is instantiated, and according to the instantiation result, it is determined whether the number of keywords is within a preset first word number interval or a second word number interval;

[0098] If it is in the first word quantity interval, the first placeholder width pixel of the keyword in the chart is calculated according to the number of keywords and the preset current visible width pixel;

[0099] If it is in the second word quantity interval, the second placeholder width pixel of the keyword in the chart is calculated according to the number of keywords and the preset maximum supported width pixel, wherein the placeholder width pixel includes the first placeholder pixel and the second placeholder width pixel.

[0100] Specifically, the second instance unit 4023 is further used for:

[0101] If the placeholder width pixel is the first placeholder width pixel, based on the first placeholder width pixel, a first line graph is constructed using the first subcomponent and all the keywords, and a second line graph is constructed using the second subcomponent and all the keywords.

[0102] Specifically, the second instance unit 4023 is further used for:

[0103] If the placeholder width pixel is the second placeholder width pixel, all the keywords are divided into N groups of words according to the display order of the keywords and the preset number of visible words of the keywords;

[0104] Based on the first placeholder width pixels, a first line graph is constructed using the i-th group of words through the first subcomponent, and a second line graph is constructed using the j-th group of words through the second subcomponent, wherein N is a positive integer, i is an odd number in N, and j is an even number in N.

[0105] Specifically, the configuration module 402 includes:

[0106] A positioning unit 4024, configured to locate a first key frame where the first keyword display position is located in the first line graph and the second line graph, and a second key frame where the second keyword display position is located;

[0107] A configuration unit 4025, configured to configure the dynamic attribute parameters of the first line graph according to the first key frame and the second key frame of the first line graph, and to configure the second dynamic attribute parameters of the second line graph according to the first key frame and the second key frame of the second line graph;

[0108] The splicing unit 4026 is used to dynamically splice the first line graph and the second line graph according to the second key frame of the first line graph and the first key frame of the second line graph, or a key frame of the second line graph and the second key frame of the second line graph.

[0109] Specifically, the conversion module 401 includes:

[0110] The extraction unit 4011 is used to extract the interface key attribute and the interface parameter value in the keyword, and obtain the corresponding chart key attribute and the chart parameter value according to the preset chart data structure;

[0111] The corresponding unit 4012 is used to correspond the interface key attribute to the chart key attribute, and correspond the interface parameter value to the chart parameter value, so as to obtain chart data.

[0112] In an embodiment of the present invention, keywords to be displayed are obtained and converted into chart data of a preset chart data structure; based on the chart data, corresponding multiple line graphs are constructed according to the preset chart display style, and each line graph is dynamically configured according to the display order of each keyword; each dynamically configured line graph is scrolled and carouseled in turn to display the keywords currently rotated to the line graph in turn during the circular carousel process, thereby realizing a circular carousel of the real-time pulse of the keywords and improving the display flexibility of the keyword circular carousel.

[0113] above Figure 4 and Figure 5 The word carousel device in the embodiment of the present invention is described in detail from the perspective of modular functional entities, and the word carousel device in the embodiment of the present invention is described in detail from the perspective of hardware processing.

[0114] Figure 6 6 is a schematic diagram of the structure of a word carousel device provided by an embodiment of the present invention. The word carousel device 600 may have relatively large differences due to different configurations or performances, and may include one or more processors (central processing units, CPU) 610 (for example, one or more processors) and a memory 620, and one or more storage media 630 (for example, one or more mass storage devices) storing application programs 633 or data 632. Among them, the memory 620 and the storage medium 630 can be short-term storage or permanent storage. The program stored in the storage medium 630 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations in the word carousel device 600. Furthermore, the processor 610 can be configured to communicate with the storage medium 630 to execute a series of instruction operations in the storage medium 630 on the word carousel device 600.

[0115] The word carousel device 600 may also include one or more power supplies 640, one or more wired or wireless network interfaces 650, one or more input and output interfaces 660, and / or one or more operating systems 631, such as Windows Server, Mac OS X, Unix, Linux, FreeBSD, etc. It will be appreciated by those skilled in the art that Figure 6 The structure of the word carousel device shown does not constitute a limitation on the word carousel device, and may include more or less components than shown in the figure, or combine certain components, or arrange the components differently.

[0116] The present invention also provides a word carousel device, the computer device includes a memory and a processor, the memory stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the processor executes the steps of the word carousel method in the above embodiments.

[0117] The present invention also provides a computer-readable storage medium, which may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions are executed on a computer, the computer executes the steps of the word carousel method.

[0118] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0119] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program codes.

[0120] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features thereof may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A word rotation method, characterized in that: The word carousel method comprises: Acquire keywords to be displayed, and convert the keywords into chart data of a preset chart data structure; Based on the chart data, construct a plurality of corresponding line charts according to a preset chart display style, and dynamically configure each of the line charts according to the display order of each of the keywords; The dynamically configured line graphs are sequentially scrolled and rotated, so as to sequentially display the keywords currently rotated to the line graph in the process of circular rotation; The constructing of the corresponding multiple line graphs based on the chart data and in accordance with the preset chart display style comprises: Determine the parent component, the first subcomponent, and the second subcomponent corresponding to the preset chart display style; Based on the chart data, the parent component is instantiated to obtain the placeholder width in pixels of the keyword in the chart; According to the placeholder width pixels, instantiate the first subcomponent to obtain a first line graph, and instantiate the second subcomponent to obtain a second line graph, wherein the plurality of line graphs include at least one first line graph and at least one second line graph; The instantiation of the parent component based on the chart data to obtain the placeholder width pixels of the keyword in the chart includes: Based on the chart data, the parent component is instantiated, and according to the instantiation result, it is determined whether the number of keywords is within a preset first word number interval or a second word number interval; If it is in the first word quantity interval, the first placeholder width pixel of the keyword in the chart is calculated according to the number of keywords and the preset current visible width pixel; If it is in the second word quantity interval, then according to the quantity of keywords and the preset maximum supported width pixels, calculate the second placeholder width pixels of the keywords in the chart, wherein the placeholder width pixels include the first placeholder pixels and the second placeholder width pixels; The instantiating the first subcomponent according to the placeholder width pixels to obtain a first line graph, and the instantiating the second subcomponent to obtain a second line graph comprises: If the placeholder width pixel is a first placeholder width pixel, based on the first placeholder width pixel, a first line graph is constructed by using the first subcomponent and all the keywords, and a second line graph is constructed by using the second subcomponent and all the keywords; The instantiating the first subcomponent according to the placeholder width pixels to obtain a first line graph, and the instantiating the second subcomponent to obtain a second line graph comprises: If the placeholder width pixel is the second placeholder width pixel, all the keywords are divided into N groups of words according to the display order of the keywords and the preset number of visible words of the keywords; Based on the first placeholder width pixels, a first line graph is constructed using the i-th group of words through the first subcomponent, and a second line graph is constructed using the j-th group of words through the second subcomponent, wherein N is a positive integer, i is an odd number in N, and j is an even number in N.

2. The word rotation method according to claim 1, characterized in that: The dynamically configuring each of the line graphs according to the display order of each of the keywords includes: Locate a first key frame where a first keyword display position is located in the first line graph and the second line graph, and a second key frame where a second keyword display position is located; According to the first key frame and the second key frame of the first line graph, configure the dynamic attribute parameters of the first line graph, and according to the first key frame and the second key frame of the second line graph, configure the second dynamic attribute parameters of the second line graph; The first line graph and the second line graph are dynamically spliced ​​according to the second key frame of the first line graph and the first key frame of the second line graph, or the first key frame of the second line graph and the second key frame of the second line graph.

3. The word rotation method according to claim 1 or 2, characterized in that: The step of converting the keywords into chart data of a preset chart data structure includes: Extracting the interface key attribute and the interface parameter value in the keyword, and acquiring the corresponding chart key attribute and the chart parameter value according to the preset chart data structure; The interface key attribute is mapped to the chart key attribute, and the interface parameter value is mapped to the chart parameter value to obtain chart data.

4. A word carousel device, characterized in that: The word carousel device comprises: A conversion module, used for acquiring keywords to be displayed, and converting the keywords into chart data of a preset chart data structure; A configuration module, for constructing a plurality of corresponding line graphs according to a preset chart display style based on the chart data, and dynamically configuring each of the line graphs according to the display order of each of the keywords; A carousel module, used to sequentially scroll and carousel the dynamically configured line graphs, so as to sequentially display the keywords currently rotated to the line graph during the circular carousel process; The configuration module includes: a determination unit, used to determine a parent component, a first subcomponent, and a second subcomponent corresponding to a preset chart display style; a first instance unit, used to instantiate the parent component based on the chart data to obtain a placeholder width pixel of the keyword in the chart; a second instance unit, used to instantiate the first subcomponent according to the placeholder width pixel to obtain a first line chart, and instantiate the second subcomponent to obtain a second line chart, wherein the multiple line charts include at least one first line chart and at least one second line chart; The first instance unit is further used for: instantiating the parent component based on the chart data, and judging whether the number of keywords is in a preset first word number interval or a second word number interval according to the instantiation result; if it is in the first word number interval, calculating the first placeholder width pixel of the keyword in the chart according to the number of keywords and the preset current visible width pixel; if it is in the second word number interval, calculating the second placeholder width pixel of the keyword in the chart according to the number of keywords and the preset maximum supported width pixel, wherein the placeholder width pixel includes the first placeholder pixel and the second placeholder width pixel; The second instance unit is further configured to: if the placeholder width pixel is a first placeholder width pixel, based on the first placeholder width pixel, construct a first line graph using all the keywords through the first subcomponent, and construct a second line graph using all the keywords through the second subcomponent; The second instance unit is also used for: if the placeholder width pixel is a second placeholder width pixel, dividing all keywords into N groups of words according to the display order of the keywords and the preset number of visible words of the keywords; based on the first placeholder width pixel, constructing a first line graph through the first subcomponent using the i-th group of words, and constructing a second line graph through the second subcomponent using the j-th group of words, wherein N is a positive integer, i is an odd number in N, and j is an even number in N.

5. The word carousel device according to claim 4, characterized in that: The configuration module includes: a positioning unit, used to locate the first key frame where the first keyword display position is located in the first line graph and the second line graph, and the second key frame where the second keyword display position is located; a configuration unit, used to configure the dynamic attribute parameters of the first line graph according to the first key frame and the second key frame of the first line graph, and configure the second dynamic attribute parameters of the second line graph according to the first key frame and the second key frame of the second line graph; a splicing unit, used to dynamically splice the first line graph and the second line graph according to the second key frame of the first line graph and the first key frame of the second line graph, or a key frame of the second line graph and the second key frame of the second line graph.

6. The word carousel device according to claim 4 or 5, characterized in that: The conversion module includes: an extraction unit, used to extract the interface key value attributes and interface parameter values ​​in the keyword, and obtain the corresponding chart key value attributes and chart parameter values ​​according to a preset chart data structure; a corresponding unit, used to correspond the interface key value attributes to the chart key value attributes, and correspond the interface parameter values ​​to the chart parameter values, so as to obtain chart data.

7. A word carousel device, characterized in that: The word carousel device comprises: a memory and at least one processor, wherein instructions are stored in the memory; The at least one processor calls the instructions in the memory to enable the word carousel device to perform the steps of the word carousel method as described in any one of claims 1-3.

8. A computer-readable storage medium having instructions stored thereon, characterized in that: When the instructions are executed by the processor, the steps of the word carousel method as described in any one of claims 1 to 3 are implemented.

Images