CN114610802A - 词轮播方法、装置、设备及存储介质 - Google Patents
词轮播方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN114610802A CN114610802A CN202210268516.9A CN202210268516A CN114610802A CN 114610802 A CN114610802 A CN 114610802A CN 202210268516 A CN202210268516 A CN 202210268516A CN 114610802 A CN114610802 A CN 114610802A
- Authority
- CN
- China
- Prior art keywords
- keywords
- carousel
- word
- graph
- fold line
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 61
- 238000005096 rolling process Methods 0.000 claims abstract description 22
- 238000010586 diagram Methods 0.000 claims description 45
- 238000006243 chemical reaction Methods 0.000 claims description 7
- 125000004122 cyclic group Chemical group 0.000 abstract description 10
- 230000000694 effects Effects 0.000 description 16
- 238000012216 screening Methods 0.000 description 6
- 238000013461 design Methods 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 3
- 238000010276 construction Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 239000004816 latex Substances 0.000 description 1
- 229920000126 latex Polymers 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/248—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/245—Query processing
- G06F16/2458—Special types of queries, e.g. statistical queries, fuzzy queries or distributed queries
- G06F16/2462—Approximate or statistical queries
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Computational Linguistics (AREA)
- General Engineering & Computer Science (AREA)
- Probability & Statistics with Applications (AREA)
- Fuzzy Systems (AREA)
- Mathematical Physics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及大数据技术领域，公开了一种词轮播方法、装置、设备及存储介质。该方法包括：获取待展示的关键词，并将关键词转换为预设的图表数据结构的图表数据；基于图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各关键词的展示顺序，对各折线图进行动态配置；依次对动态配置后的各折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。本发明实现了关键词实时脉搏的循环轮播，提升了关键词循环轮播的展示灵活性。
Description
技术领域
本发明涉及大数据技术领域，尤其涉及一种词轮播方法、装置、设备及存储介质。
背景技术
身处大数据时代，数据统计已成为各行各业十分重要的一种趋势导向，比如统计线上某商品今日访问量，比如统计某社交平台的热门搜索关键词，从而衍生出的百度热搜、微博热搜等，同时也包括政务系统的搜索统计，统计用户搜索的关键词及关键词。
而对于现有技术对关键词的展示，按热度值生成的热搜榜和实时脉搏(关键词循环轮播)，从技术实现上，热搜页面的实时脉搏轮播图是由SVG(可缩放矢量图形，ScalableVector Graphics)动画效果实现，以展示相对应的关键词。但由于基于如SVG设计的热搜实时脉搏，存在功能架构设计较为复杂的问题，使得关键词循环轮播展示的灵活性较低。
发明内容
本发明的主要目的在于解决现有词循环轮播的功能架构设计较为复杂，使得词循环轮播展示的灵活性较低的技术问题。
本发明第一方面提供了一种词轮播方法，包括：获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；基于所述图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各所述关键词的展示顺序，对各所述折线图进行动态配置；依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
可选的，在本发明第一方面的第一种实现方式中，所述基于所述图表数据，按照预设图表展示样式构建对应的多张折线图包括：确定预设图表展示样式对应的父组件、第一子组件和第二子组件；基于所述图表数据，对所述父组件进行实例化，得到关键词在图表的占位宽度像素；根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图，其中，所述多张折线图包括至少一张第一折线图和至少一张第二折线图。
可选的，在本发明第一方面的第二种实现方式中，所述基于所述图表数据，对所述父组件进行实例化，得到关键词在图表的占位宽度像素包括：基于所述图表数据，对所述父组件进行实例化，并根据实例化的结果，判断关键词的数量在预设的第一词数量区间或者第二词数量区间；若在第一词数量区间，则根据关键词的数量和预设的当前可见宽度像素，计算关键词在图表的第一占位宽度像素；若在第二词数量区间，则根据关键词的数量和预设的最大支持宽度像素，计算关键词在图表的第二占位宽度像素，其中，所述占位宽度像素包括第一占位像素和第二占位宽度像素。
可选的，在本发明第一方面的第三种实现方式中，所述根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图包括：若所述占位宽度像素为第一占位宽度像素，则基于所述第一占位宽度像素，通过所述第一子组件采用全部关键词构建第一折线图，以及通过所述第二子组件采用所述全部关键词构建第二折线图。
可选的，在本发明第一方面的第四种实现方式中，所述根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图包括：若所述占位宽度像素为第二占位宽度像素，则按照关键词的展示顺序和关键词的预设可见词数量，将全部关键词划分为N组词组；基于所述第一占位宽度像素，通过所述第一子组件采用第i组词组构建第一折线图，以及通过所述第二子组件采用第j组词组构建第二折线图，其中，所述N正整数，i为N中的单数，j为N中的双数。
可选的，在本发明第一方面的第五种实现方式中，所述按照各所述关键词的展示顺序，对各所述折线图进行动态配置包括：定位所述第一折线图中和所述第二折线图中的第一关键词展示位置所在的第一关键帧、以及第二关键词展示位置所在的第二关键帧；根据所述第一折线图的第一关键帧和第二关键帧，配置所述第一折线图的动态属性参数，根据所述第二折线图的第一关键帧和所述第二关键帧，配置所述第二折线图的第二动态属性参数；根据所述第一折线图的第二关键帧和所述第二折线图的第一关键帧、或者所述第二折线图的一关键帧和所述第二折线图的第二关键帧，对所述第一折线图和所述第二折线图进行动态拼接。
可选的，在本发明第一方面的第六种实现方式中，所述将所述关键词转换为预设的图表数据结构的图表数据包括：提取所述关键词中的接口键值属性和接口参数值，以及根据预设的图表数据结构，获取对应的图表键值属性和图表参数值；将所述接口键值属性对应到所述图表键值属性，以及将所述接口参数值对应到所述图表参数值，得到图表数据。
本发明第二方面提供了一种词轮播装置，包括：转换模块，用于获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；配置模块，用于基于所述图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各所述关键词的展示顺序，对各所述折线图进行动态配置；轮播模块，用于依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
可选的，在本发明第二方面的第一种实现方式中，所述配置模块包括：确定单元，用于确定预设图表展示样式对应的父组件、第一子组件和第二子组件；第一实例单元，用于基于所述图表数据，对所述父组件进行实例化，得到关键词在图表的占位宽度像素；第二实例单元，用于根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图，其中，所述多张折线图包括至少一张第一折线图和至少一张第二折线图。
可选的，在本发明第二方面的第二种实现方式中，所述第一实例单元还用于：基于所述图表数据，对所述父组件进行实例化，并根据实例化的结果，判断关键词的数量在预设的第一词数量区间或者第二词数量区间；若在第一词数量区间，则根据关键词的数量和预设的当前可见宽度像素，计算关键词在图表的第一占位宽度像素；若在第二词数量区间，则根据关键词的数量和预设的最大支持宽度像素，计算关键词在图表的第二占位宽度像素，其中，所述占位宽度像素包括第一占位像素和第二占位宽度像素。
可选的，在本发明第二方面的第三种实现方式中，所述第二实例单元还用于：若所述占位宽度像素为第一占位宽度像素，则基于所述第一占位宽度像素，通过所述第一子组件采用全部关键词构建第一折线图，以及通过所述第二子组件采用所述全部关键词构建第二折线图。
可选的，在本发明第二方面的第四种实现方式中，所述第二实例单元还用于：若所述占位宽度像素为第二占位宽度像素，则按照关键词的展示顺序和关键词的预设可见词数量，将全部关键词划分为N组词组；基于所述第一占位宽度像素，通过所述第一子组件采用第i组词组构建第一折线图，以及通过所述第二子组件采用第j组词组构建第二折线图，其中，所述N正整数，i为N中的单数，j为N中的双数。
可选的，在本发明第二方面的第五种实现方式中，所述配置模块包括：定位单元，用于定位所述第一折线图中和所述第二折线图中的第一关键词展示位置所在的第一关键帧、以及第二关键词展示位置所在的第二关键帧；配置单元，用于单元，用于根据所述第一折线图的第一关键帧和第二关键帧，配置所述第一折线图的动态属性参数，根据所述第二折线图的第一关键帧和所述第二关键帧，配置所述第二折线图的第二动态属性参数；拼接单元，用于根据所述第一折线图的第二关键帧和所述第二折线图的第一关键帧、或者所述第二折线图的一关键帧和所述第二折线图的第二关键帧，对所述第一折线图和所述第二折线图进行动态拼接。
可选的，在本发明第二方面的第六种实现方式中，所述转换模块包括：提取单元，用于提取所述关键词中的接口键值属性和接口参数值，以及根据预设的图表数据结构，获取对应的图表键值属性和图表参数值；对应单元，用于将所述接口键值属性对应到所述图表键值属性，以及将所述接口参数值对应到所述图表参数值，得到图表数据。
本发明第三方面提供了一种词轮播设备，包括：存储器和至少一个处理器，所述存储器中存储有指令；所述至少一个处理器调用所述存储器中的所述指令，以使得所述词轮播设备执行上述的词轮播方法。
本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的词轮播方法。
本发明提供的技术方案中，通过如ECharts的折线图为基础，然后使用如CSS的方法将折线图进行动态呈现，实现循环轮播的效果，对于关键词的展示，不仅可以以列表或者表格形式，也能以图表无限滚动的动态效果呈现给用户，使得关键词循环轮播的功能架构设计更为简洁，后续可配置程度高，使得关键词循环轮播展示的灵活性提升。
附图说明
图1为本发明实施例中词轮播方法的第一个实施例示意图；
图2为本发明实施例中词轮播方法的第二个实施例示意图；
图3为本发明实施例中词轮播方法的第三个实施例示意图；
图4为本发明实施例中词轮播装置的一个实施例示意图；
图5为本发明实施例中词轮播装置的另一个实施例示意图；
图6为本发明实施例中词轮播设备的一个实施例示意图。
具体实施方式
本发明实施例提供了一种词轮播方法、装置、设备及存储介质，获取待展示的关键词，并将关键词转换为预设的图表数据结构的图表数据；基于图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各关键词的展示顺序，对各折线图进行动态配置；依次对动态配置后的各折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。本发明实现了关键词实时脉搏的循环轮播，提升了关键词循环轮播的展示灵活性。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中词轮播方法的第一个实施例包括：
101、获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；
可以理解的是，本发明的执行主体可以为词轮播装置，还可以是终端或者服务器，具体此处不做限定。本发明实施例以服务器为执行主体为例进行说明。
本实施例中，不同的业务平台均有其关键词统计，可以为同一业务平台内出现较为频繁的搜索关键词，也可以为多业务平台统计下出现较为频繁的搜索关键词，此处不作具体限定。根据统计到的热搜关键词，在热搜榜上进行展示。待展示的关键词具体示例包括：购物平台上的热搜商品的关键词、搜索引擎上的热搜浏览的关键词、政务系统的热搜问答的关键词等，此处不一一列举。
本实施例中，先将关键词从纯文本的数据结构，转换为带有图表数据结构的图表数据。其中，此处图表数据结构具体可以为折线图表，比如ECharts的图表数据结构，图表数据可以包括每个关键词的图表格式编码、所在坐标信息等，比如根据(热搜排名，统计量)来作为对应关键词的(x，y)坐标值。
102、基于所述图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各所述关键词的展示顺序，对各所述折线图进行动态配置；
本实施例中，在转换得到关键词的图表数据后，可以按照预先设置好的图表展示样式，比如关键词的占位像素宽度、字体大小、颜色、折线展示方式等，来构建折线图，以制作关键词轮播的折线图的静态展示效果，具体可以采用ECharts的Canvas画纸构建折线图。
具体的，可以在空白Canvas图纸中，可以以左边和下边分别作为x轴和y轴，构建一个二维坐标系，然后根据每个关键词对应的热搜排名和搜索统计量，来确定关键词在折线图的位置，以点表示，并进行直线连接或者平滑线连接，即可构建折线图。
在构建得到静态展示效果的关键词对应的多张折线图后，可以通过CSS样式，给折线图ECharts加上滚动和循环轮播。为了给折线图添加滚动和循环轮播的效果，至少需要设置两张折线图，比如第一折线图和第二折线图，第一折线图开始滚动离开当前展示屏幕时，第二折线图需无缝衔接第一折线图展示在当前展示屏幕上，第二折线图开始滚动离开当前展示屏幕时，第一折线图无缝衔接第二折线图展示在当前展示屏幕上，以此循环。
具体的，可以通过“animation:mymove2 80s infinite linear”来给折线图添加动态效果，其中，Animation表示为折线图添加动画属性，mymove是动画名称，80s表示这个动画一次播放80秒，infinite表示播放的次数为无限次，linear代表在这80秒中动画是匀速播放的。
另外，可以通过@keyframes mymove1和@keyframes mymove2来定义第一折线图和第二折线图衔接部分的关键帧动态展示，第一折线图执行过程为：0％{transform:translate(0)，translateZ(0)；}；100％{transform:translate(-100％)translateZ(0)；第二折线图执行过程为：0％{transform:translate(100％)translateZ(0)；}；100％{transform:translate(0)translateZ(0)；
103、依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
本实施例中，在配置好折线图的动态效果好，则对折线图进行滚动轮播，展示关键词，当点击关键词，获取当前点击关键词的名称name，并执行js的toEchartsWord()方法，然后当执行此方法的时候，立即让当前滚动的图表暂停，并设置动画时间为0s；把父组件传给子组件的X轴数据赋值给xAxisdataNew2，把父组件传给子组件的折现图数据赋值给yAxisData，以找到当前点击的关键词在关键词数组里的下标；如果下标不为0，即不在第一个位置，需按照正常轮播的顺序，把当前点击的词，放到第一位置，同时把折线图数据集合也按照x轴的次序，重新排列；经验证，把选中的关键词高亮显示在图表可见区域的第二个位置较为显眼，所以这里把新组合的集合的末位词，复制到第一个位置，即首位和末位都为最后一个相同的词，对应的数据也同理。折线图滚动的速度根据当前关键词数组集合的长度而定。
另外，鼠标移入滚动图可见范围(包括但不限于关键词和阴影)，滚动效果停止，点击关键词或者点击滚动图可见范围，还会计算自动定位到附近距离最近的一个热词，鼠标移开滚动图范围继续运行。
除此之外，在筛选关键词时，可以支持按天、按月、按季度进行筛选，对于季度的筛选组件，目前市场上没有第三方组件提供，为了解决季度筛选问题，本方案基于elementUI的DatePicker日期选择器中对月份的筛选，在其源码基础上进行二次开发，以实现对季度的筛选。
本发明实施例中，通过如ECharts的折线图为基础，然后使用如CSS的方法将折线图进行动态呈现，实现循环轮播的效果，对于关键词的展示，不仅可以以列表或者表格形式，也能以图表无限滚动的动态效果呈现给用户，使得关键词循环轮播的功能架构设计更为简洁，后续可配置程度高，使得关键词循环轮播展示的灵活性提升。
请参阅图2，本发明实施例中词轮播方法的第二个实施例包括：
201、获取待展示的关键词，并提取所述关键词中的接口键值属性和接口参数值，以及根据预设的图表数据结构，获取对应的图表键值属性和图表参数值；
202、将所述接口键值属性对应到所述图表键值属性，以及将所述接口参数值对应到所述图表参数值，得到图表数据；
本实施例中，关键词的获取可以通过请求第三方接口获取得到，或通过后台接口对接服务间接请求得到。其中，接口键值属性可以包括{“关键词名称”、“关键词热搜排名”、“关键词搜索量”}等，对应的接口参数值则可以为{“数字化平台”、“4”、“200(单位：万)”}等。
另外，图表数据结构中，图表键值属性可以包括{“标注显示”、“x轴坐标”、“y轴坐标”}等，对应的图表参数值可以包括{“数字化平台”、“4”、“5”}可以分别与接口键值属性和接口参数值对应，将关键词相关的统计数据转换为待构建的折线图信息，并记录为图表数据。即将接口键值属性的key键值对应到图表键值属性的key键值，将接口参数值的value值对应到图表参数值的value值。
203、确定预设图表展示样式对应的父组件、第一子组件和第二子组件，并基于所述图表数据，对所述父组件进行实例化，得到关键词在图表的占位宽度像素；
204、根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图，其中，所述多张折线图包括至少一张第一折线图和至少一张第二折线图；
本实施例中，可以通过ECharts来预先构建预设图表展示样式的vue父组件FatherComponent.vue、第一子组件和第二子组件对应的两个vue子组件：EchartsLineRun.vue。其中，通过vue父组件实例化得到的图表的占位宽度像素指的是在折线图中每个点上的关键词之间的间隔。
另外，定义两个echarts是为了第一个echarts图表的最后一个关键词和第二个echart图表的第一个关键词在循环轮播过程中可以无缝拼接，以实现关键词按照脉搏滚动的动态轮播效果。
205、定位所述第一折线图中和所述第二折线图中的第一关键词展示位置所在的第一关键帧、以及第二关键词展示位置所在的第二关键帧；
206、根据所述第一折线图的第一关键帧和第二关键帧，配置所述第一折线图的动态属性参数，根据所述第二折线图的第一关键帧和所述第二关键帧，配置所述第二折线图的第二动态属性参数；
207、根据所述第一折线图的第二关键帧和所述第二折线图的第一关键帧、或者所述第二折线图的一关键帧和所述第二折线图的第二关键帧，对所述第一折线图和所述第二折线图进行动态拼接；
本实施例中，第一关键帧指的是第一折线图和第二折线图中首个关键词所在的一行或多行像素帧，第二关键帧指的是第一折线图和第二折线图中最后一个关键词所在的一行或多行像素帧。
针对顺序轮播的第一张折线图到最后一张第一折线图/第二折线图，通过对第一折线图的第二关键帧和第二折线图的第一关键帧进行拼接，使得前后两张折线图无缝衔接实现动态滚动的轮播效果；针对最后一张第一折线图/第二折线图到第一张第一折线图，则通过对第二折线图的一关键帧和第二折线图的第二关键帧进行拼接，以实现最后一张折线图轮播返回第一张折线图的动态滚动的轮播效果。
即当第一个echarts图表从当前可见区域滚动结束随即追加到第二个echarts图表后面，即第二个echart图表的最后一个关键词又和第一个echarts图表的第一个关键词无缝拼接，以此类推，达到循环轮播折线图中关键词的效果。进一步地，为了保证图表的首位和末位能无缝拼接，还可以进一步把首位和末位设置为同一个关键词，即都为第一个关键词。
208、依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
本发明实施例中，通过获取待展示的关键词，并将关键词转换为预设的图表数据结构的图表数据；基于图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各关键词的展示顺序，对各折线图进行动态配置；依次对动态配置后的各折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词，实现了关键词实时脉搏的循环轮播，提升了关键词循环轮播的展示灵活性。
请参阅图3，本发明实施例中词轮播方法的第三个实施例包括：
301、获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；
302、确定预设图表展示样式对应的父组件、第一子组件和第二子组件；
303、基于所述图表数据，对所述父组件进行实例化，并根据实例化的结果，判断关键词的数量在预设的第一词数量区间或者第二词数量区间；
304、若在第一词数量区间，则根据关键词的数量和预设的当前可见宽度像素，计算关键词在图表的第一占位宽度像素；
305、若在第二词数量区间，则根据关键词的数量和预设的最大支持宽度像素，计算关键词在图表的第二占位宽度像素；
本实施例中，根据关键词的数量来确定计算图表中每个关键词的占位宽度像素，即每个关键词的显示间距。其中，第一词数量区间为关键词数量少于或等于屏幕的可见宽度像素，对应第一种占位宽度像素的计算方法，得到第一占位宽度像素；第二词数量区间为关键词数量大于屏幕的可见宽度像素但是少于可支持的最大宽度像素，对应第二种占位宽度像素的计算方法，得到第二占位宽度像素。
具体的，定义vue父组件：FatherComponent.vue，然后通过Js方法：newWidth()来根据关键词的数量计算对应的占位宽度像素，比如newWidth(wordEchartsData.xAxisdata.length)”，若第一词数量区间为1-7，第二词数量区间为8-100，则在判断关键词的数量在第一词数量区间和第二词数量区间时，可以执行如下所示的方法：
如果小于8个关键词，占位总宽度等于当前可见宽度，则每个关键词的第一占位宽度像素则为当前可见宽度除以关键词的数量。根据先验知识，比如因为浏览器性能原因，此处最大支持宽度为15000px，然后分配到每个关键词的宽度，等于15000px除以关键词个数，如果大于100个热词，按照每个关键词占位宽度为150像素。
306、若所述占位宽度像素为第一占位宽度像素，则基于所述第一占位宽度像素，通过所述第一子组件采用全部关键词构建第一折线图，以及通过所述第二子组件采用所述全部关键词构建第二折线图；
307、若所述占位宽度像素为第二占位宽度像素，则按照关键词的展示顺序和关键词的预设可见词数量，将全部关键词划分为N组词组；
308、基于所述第一占位宽度像素，通过所述第一子组件采用第i组词组构建第一折线图，以及通过所述第二子组件采用第j组词组构建第二折线图，其中，所述N正整数，i为N中的单数，j为N中的双数；
本实施例中，如果关键词在图表的占位宽度像素表示为第一占位宽度像素，则直接采用待展示的所有关键词分别构建第一折线图和第二折线图，则后续的关键词轮播展示在该两张第一折线图和第二折线图之间循环。
如果关键词在图表的占位宽度像素表示为第二占位宽度像素，则屏幕当前的可见页面无法展示全部关键词，则按照屏幕的可见词数量，来对所有关键词进行分组，比如包括70个待展示的关键词，可见词数量为7，则可以将全部关键词划分为10组词组，其中，第1、3、5、7组词组(第i组词组)构建第一折线图，第2、4、6组词组(第j组词组)构建第二折线图，即交叉构建第一折线图和第二折线图。
其中，在构建时，可以通过div class＝”echart-box flag”以及div class＝”echart-box2 flag”来定义第一折线图和第二折线图，并以<div class＝”echart”:style＝”{width}”ref＝”echarts”>和<div class＝”echart”:style＝”{width}”ref＝”echarts2”>执行折线图构建和应用前面的占位宽度像素。
309、按照各所述关键词的展示顺序，对各所述折线图进行动态配置；
310、依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
本发明实施例中，通过获取待展示的关键词，并将关键词转换为预设的图表数据结构的图表数据；基于图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各关键词的展示顺序，对各折线图进行动态配置；依次对动态配置后的各折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词，实现了关键词实时脉搏的循环轮播，提升了关键词循环轮播的展示灵活性。
上面对本发明实施例中词轮播方法进行了描述，下面对本发明实施例中词轮播装置进行描述，请参阅图4，本发明实施例中词轮播装置一个实施例包括：
转换模块401，用于获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；
配置模块402，用于基于所述图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各所述关键词的展示顺序，对各所述折线图进行动态配置；
轮播模块403，用于依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
本发明实施例中，通过如ECharts的折线图为基础，然后使用如CSS的方法将折线图进行动态呈现，实现循环轮播的效果，对于关键词的展示，不仅可以以列表或者表格形式，也能以图表无限滚动的动态效果呈现给用户，使得关键词循环轮播的功能架构设计更为简洁，后续可配置程度高，使得关键词循环轮播展示的灵活性提升。
请参阅图5，本发明实施例中词轮播装置的另一个实施例包括：
转换模块401，用于获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；
配置模块402，用于基于所述图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各所述关键词的展示顺序，对各所述折线图进行动态配置；
轮播模块403，用于依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
具体的，所述配置模块402包括：
确定单元4021，用于确定预设图表展示样式对应的父组件、第一子组件和第二子组件；
第一实例单元4022，用于基于所述图表数据，对所述父组件进行实例化，得到关键词在图表的占位宽度像素；
第二实例单元4023，用于根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图，其中，所述多张折线图包括至少一张第一折线图和至少一张第二折线图。
具体的，所述第一实例单元4022还用于：
基于所述图表数据，对所述父组件进行实例化，并根据实例化的结果，判断关键词的数量在预设的第一词数量区间或者第二词数量区间；
若在第一词数量区间，则根据关键词的数量和预设的当前可见宽度像素，计算关键词在图表的第一占位宽度像素；
若在第二词数量区间，则根据关键词的数量和预设的最大支持宽度像素，计算关键词在图表的第二占位宽度像素，其中，所述占位宽度像素包括第一占位像素和第二占位宽度像素。
具体的，所述第二实例单元4023还用于：
若所述占位宽度像素为第一占位宽度像素，则基于所述第一占位宽度像素，通过所述第一子组件采用全部关键词构建第一折线图，以及通过所述第二子组件采用所述全部关键词构建第二折线图。
具体的，所述第二实例单元4023还用于：
若所述占位宽度像素为第二占位宽度像素，则按照关键词的展示顺序和关键词的预设可见词数量，将全部关键词划分为N组词组；
基于所述第一占位宽度像素，通过所述第一子组件采用第i组词组构建第一折线图，以及通过所述第二子组件采用第j组词组构建第二折线图，其中，所述N正整数，i为N中的单数，j为N中的双数。
具体的，所述配置模块402包括：
定位单元4024，用于定位所述第一折线图中和所述第二折线图中的第一关键词展示位置所在的第一关键帧、以及第二关键词展示位置所在的第二关键帧；
配置单元4025，用于单元，用于根据所述第一折线图的第一关键帧和第二关键帧，配置所述第一折线图的动态属性参数，根据所述第二折线图的第一关键帧和所述第二关键帧，配置所述第二折线图的第二动态属性参数；
拼接单元4026，用于根据所述第一折线图的第二关键帧和所述第二折线图的第一关键帧、或者所述第二折线图的一关键帧和所述第二折线图的第二关键帧，对所述第一折线图和所述第二折线图进行动态拼接。
具体的，所述转换模块401包括：
提取单元4011，用于提取所述关键词中的接口键值属性和接口参数值，以及根据预设的图表数据结构，获取对应的图表键值属性和图表参数值；
对应单元4012，用于将所述接口键值属性对应到所述图表键值属性，以及将所述接口参数值对应到所述图表参数值，得到图表数据。
本发明实施例中，通过获取待展示的关键词，并将关键词转换为预设的图表数据结构的图表数据；基于图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各关键词的展示顺序，对各折线图进行动态配置；依次对动态配置后的各折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词，实现了关键词实时脉搏的循环轮播，提升了关键词循环轮播的展示灵活性。
上面图4和图5从模块化功能实体的角度对本发明实施例中的词轮播装置进行详细描述，下面从硬件处理的角度对本发明实施例中词轮播设备进行详细描述。
图6是本发明实施例提供的一种词轮播设备的结构示意图，该词轮播设备600可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(centralprocessing units，CPU)610(例如，一个或一个以上处理器)和存储器620，一个或一个以上存储应用程序633或数据632的存储介质630(例如一个或一个以上海量存储设备)。其中，存储器620和存储介质630可以是短暂存储或持久存储。存储在存储介质630的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对词轮播设备600中的一系列指令操作。更进一步地，处理器610可以设置为与存储介质630通信，在词轮播设备600上执行存储介质630中的一系列指令操作。
词轮播设备600还可以包括一个或一个以上电源640，一个或一个以上有线或无线网络接口650，一个或一个以上输入输出接口660，和/或，一个或一个以上操作系统631，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图6示出的词轮播设备结构并不构成对词轮播设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
本发明还提供一种词轮播设备，所述计算机设备包括存储器和处理器，存储器中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行上述各实施例中的所述词轮播方法的步骤。
本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述词轮播方法的步骤。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种词轮播方法，其特征在于，所述词轮播方法包括：
获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；
基于所述图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各所述关键词的展示顺序，对各所述折线图进行动态配置；
依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
2.根据权利要求1所述的词轮播方法，其特征在于，所述基于所述图表数据，按照预设图表展示样式构建对应的多张折线图包括：
确定预设图表展示样式对应的父组件、第一子组件和第二子组件；
基于所述图表数据，对所述父组件进行实例化，得到关键词在图表的占位宽度像素；
根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图，其中，所述多张折线图包括至少一张第一折线图和至少一张第二折线图。
3.根据权利要求2所述的词轮播方法，其特征在于，所述基于所述图表数据，对所述父组件进行实例化，得到关键词在图表的占位宽度像素包括：
基于所述图表数据，对所述父组件进行实例化，并根据实例化的结果，判断关键词的数量在预设的第一词数量区间或者第二词数量区间；
若在第一词数量区间，则根据关键词的数量和预设的当前可见宽度像素，计算关键词在图表的第一占位宽度像素；
若在第二词数量区间，则根据关键词的数量和预设的最大支持宽度像素，计算关键词在图表的第二占位宽度像素，其中，所述占位宽度像素包括第一占位像素和第二占位宽度像素。
4.根据权利要求3所述的词轮播方法，其特征在于，所述根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图包括：
若所述占位宽度像素为第一占位宽度像素，则基于所述第一占位宽度像素，通过所述第一子组件采用全部关键词构建第一折线图，以及通过所述第二子组件采用所述全部关键词构建第二折线图。
5.根据权利要求3所述的词轮播方法，其特征在于，所述根据所述占位宽度像素，对所述第一子组件进行实例化，得到第一折线图，以及对所述第二子组件进行实例化，得到第二折线图包括：
若所述占位宽度像素为第二占位宽度像素，则按照关键词的展示顺序和关键词的预设可见词数量，将全部关键词划分为N组词组；
基于所述第一占位宽度像素，通过所述第一子组件采用第i组词组构建第一折线图，以及通过所述第二子组件采用第j组词组构建第二折线图，其中，所述N正整数，i为N中的单数，j为N中的双数。
6.根据权利要求2-5中任一项所述的词轮播方法，其特征在于，所述按照各所述关键词的展示顺序，对各所述折线图进行动态配置包括：
定位所述第一折线图中和所述第二折线图中的第一关键词展示位置所在的第一关键帧、以及第二关键词展示位置所在的第二关键帧；
根据所述第一折线图的第一关键帧和第二关键帧，配置所述第一折线图的动态属性参数，根据所述第二折线图的第一关键帧和所述第二关键帧，配置所述第二折线图的第二动态属性参数；
根据所述第一折线图的第二关键帧和所述第二折线图的第一关键帧、或者所述第二折线图的一关键帧和所述第二折线图的第二关键帧，对所述第一折线图和所述第二折线图进行动态拼接。
7.根据权利要求1-5中任一项所述的词轮播方法，其特征在于，所述将所述关键词转换为预设的图表数据结构的图表数据包括：
提取所述关键词中的接口键值属性和接口参数值，以及根据预设的图表数据结构，获取对应的图表键值属性和图表参数值；
将所述接口键值属性对应到所述图表键值属性，以及将所述接口参数值对应到所述图表参数值，得到图表数据。
8.一种词轮播装置，其特征在于，所述词轮播装置包括：
转换模块，用于获取待展示的关键词，并将所述关键词转换为预设的图表数据结构的图表数据；
配置模块，用于基于所述图表数据，按照预设图表展示样式构建对应的多张折线图，并按照各所述关键词的展示顺序，对各所述折线图进行动态配置；
轮播模块，用于依次对动态配置后的各所述折线图进行滚动轮播，以在循环轮播的过程中依次展示当前轮播到折线图中的关键词。
9.一种词轮播设备，其特征在于，所述词轮播设备包括：存储器和至少一个处理器，所述存储器中存储有指令；
所述至少一个处理器调用所述存储器中的所述指令，以使得所述词轮播设备执行如权利要求1-7中任意一项所述的词轮播方法的步骤。
10.一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，其特征在于，所述指令被处理器执行时实现如权利要求1-7中任意一项所述词轮播方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210268516.9A CN114610802A (zh) | 2022-03-18 | 2022-03-18 | 词轮播方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210268516.9A CN114610802A (zh) | 2022-03-18 | 2022-03-18 | 词轮播方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114610802A true CN114610802A (zh) | 2022-06-10 |
Family
ID=81865456
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210268516.9A Pending CN114610802A (zh) | 2022-03-18 | 2022-03-18 | 词轮播方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114610802A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114996225A (zh) * | 2022-07-18 | 2022-09-02 | 成都中科合迅科技有限公司 | 自定义可视化组合仪器仪表控件开发方法 |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140250405A1 (en) * | 2013-03-04 | 2014-09-04 | Google Inc. | Graphical input display having a carousel of characters to facilitate character input |
| US20180218050A1 (en) * | 2017-01-31 | 2018-08-02 | Splunk Inc. | Generating visualizations for search results data containing multiple data dimensions |
| JP2020003880A (ja) * | 2018-06-25 | 2020-01-09 | 株式会社東芝 | 表示システム、プログラム、及び記憶媒体 |
| CN110990431A (zh) * | 2019-08-19 | 2020-04-10 | 四川长虹电器股份有限公司 | 一种实现中国地图和折线图数据同步联动轮播的方法 |
| CN111221897A (zh) * | 2019-11-18 | 2020-06-02 | 上海维谛信息科技有限公司 | 一种可视化视图展示方法及装置 |
| CN111428065A (zh) * | 2020-03-23 | 2020-07-17 | 北京明略软件系统有限公司 | 一种图片轮播方法、装置和设备 |
| CN112926005A (zh) * | 2021-03-29 | 2021-06-08 | 中国建设银行股份有限公司 | 一种基于ECharts的住房公积金数据展示方法和装置 |
| CN112988099A (zh) * | 2021-04-09 | 2021-06-18 | 上海掌门科技有限公司 | 视频的显示方法和装置 |
| CN113791751A (zh) * | 2021-09-27 | 2021-12-14 | 腾讯科技（深圳）有限公司 | 一种轮播图显示方法、系统及存储介质和终端设备 |
-
2022
- 2022-03-18 CN CN202210268516.9A patent/CN114610802A/zh active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140250405A1 (en) * | 2013-03-04 | 2014-09-04 | Google Inc. | Graphical input display having a carousel of characters to facilitate character input |
| US20180218050A1 (en) * | 2017-01-31 | 2018-08-02 | Splunk Inc. | Generating visualizations for search results data containing multiple data dimensions |
| JP2020003880A (ja) * | 2018-06-25 | 2020-01-09 | 株式会社東芝 | 表示システム、プログラム、及び記憶媒体 |
| CN110990431A (zh) * | 2019-08-19 | 2020-04-10 | 四川长虹电器股份有限公司 | 一种实现中国地图和折线图数据同步联动轮播的方法 |
| CN111221897A (zh) * | 2019-11-18 | 2020-06-02 | 上海维谛信息科技有限公司 | 一种可视化视图展示方法及装置 |
| CN111428065A (zh) * | 2020-03-23 | 2020-07-17 | 北京明略软件系统有限公司 | 一种图片轮播方法、装置和设备 |
| CN112926005A (zh) * | 2021-03-29 | 2021-06-08 | 中国建设银行股份有限公司 | 一种基于ECharts的住房公积金数据展示方法和装置 |
| CN112988099A (zh) * | 2021-04-09 | 2021-06-18 | 上海掌门科技有限公司 | 视频的显示方法和装置 |
| CN113791751A (zh) * | 2021-09-27 | 2021-12-14 | 腾讯科技（深圳）有限公司 | 一种轮播图显示方法、系统及存储介质和终端设备 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114996225A (zh) * | 2022-07-18 | 2022-09-02 | 成都中科合迅科技有限公司 | 自定义可视化组合仪器仪表控件开发方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11409944B2 (en) | Ordinal positioning of content items based on viewport | |
| US11023545B2 (en) | Method and device for displaying recommended contents | |
| US20180114097A1 (en) | Font Attributes for Font Recognition and Similarity | |
| US8749553B1 (en) | Systems and methods for accurately plotting mathematical functions | |
| US9703757B2 (en) | Automatically determining a size for a content item for a web page | |
| US20150278359A1 (en) | Method and apparatus for generating a recommendation page | |
| US20090265611A1 (en) | Web page layout optimization using section importance | |
| US20080077569A1 (en) | Integrated Search Service System and Method | |
| US20160110082A1 (en) | Arbitrary size content item generation | |
| EP2945073A2 (en) | Method and apparatus for providing recommended information | |
| US20180157763A1 (en) | System and method for generating an electronic page | |
| WO2015066891A1 (en) | Systems and methods for extracting and generating images for display content | |
| WO2015117268A1 (en) | Arbitrary size content item generation | |
| US11574123B2 (en) | Content analysis utilizing general knowledge base | |
| Wang et al. | Similarity-based visualization of large image collections | |
| CN111475244A (zh) | 页面生成方法、装置、设备与计算机可读存储介质 | |
| CN114610802A (zh) | 词轮播方法、装置、设备及存储介质 | |
| Gu et al. | iGraph: a graph-based technique for visual analytics of image and text collections | |
| CN111367514A (zh) | 页面卡片的开发方法和装置、计算设备和存储介质 | |
| CN109726329A (zh) | 内容推荐方法、装置及设备 | |
| IES20070382A2 (en) | A method and apparatus for providing an on-line directory service | |
| CN106951429B (zh) | 增强网页评论显示的方法、浏览器及设备 | |
| CN109299378B (zh) | 搜索结果的展示方法、装置、终端及存储介质 | |
| Seo et al. | A photomosaic image generation method using photo annotation in a social network environment | |
| JP2010039533A (ja) | 画像ランキング装置、画像ランキング方法及びプログラム |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |