CN108829381A - 一种数据可视化方法及装置 - Google Patents
一种数据可视化方法及装置 Download PDFInfo
- Publication number
- CN108829381A CN108829381A CN201810554647.7A CN201810554647A CN108829381A CN 108829381 A CN108829381 A CN 108829381A CN 201810554647 A CN201810554647 A CN 201810554647A CN 108829381 A CN108829381 A CN 108829381A
- Authority
- CN
- China
- Prior art keywords
- component
- user
- data
- presented
- chart
- 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
- 238000013079 data visualisation Methods 0.000 title claims abstract description 35
- 238000000034 method Methods 0.000 title claims abstract description 32
- 230000002452 interceptive effect Effects 0.000 claims abstract description 67
- 238000012800 visualization Methods 0.000 claims abstract description 32
- 230000006870 function Effects 0.000 claims description 49
- 238000004891 communication Methods 0.000 claims description 17
- 230000001960 triggered effect Effects 0.000 claims description 14
- 238000009877 rendering Methods 0.000 claims description 10
- 238000006243 chemical reaction Methods 0.000 claims description 9
- 230000002159 abnormal effect Effects 0.000 claims description 8
- 230000005540 biological transmission Effects 0.000 claims description 8
- 238000003475 lamination Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 7
- 230000000750 progressive effect Effects 0.000 abstract 1
- 230000000007 visual effect Effects 0.000 description 5
- 230000008901 benefit Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000007405 data analysis Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 239000000523 sample Substances 0.000 description 2
- 238000005056 compaction Methods 0.000 description 1
- 230000001747 exhibiting effect Effects 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000008961 swelling Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供了一种数据可视化方法及装置，包括：预先搭建渐进式框架vue框架；定义所述vue框架中的至少一个组件对应的功能；定义每一个所述组件与预设的数据库的交互接口；接收用户发送的可视化请求；根据所述可视化请求和每一个所述组件对应的功能，将每一个所述组件展示给所述用户；确定所述用户从展示的每一个所述组件中，选定的待展示组件；根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据；根据所述数据搭建图表，并将所述图表展示给所述用户。本方案能够降低数据可视化的开发难度。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种数据可视化方法及装置。
背景技术
大数据时代的到来，使越来越多的企业开始探究适用于本企业的数据可视化方案。传统的数据表格，往往要耗费大量的时间成本和人力输出。数据可视化的出现，优雅地解决了这个痛点，其通过直观且多样的数据展示方式，充分展示了数据的各种变化和联系，对数据分析起了重要作用，提高了数据分析的效率。
目前，传统的数据可视化开发多是基于一些插件，往往需要开发人员编辑大量臃肿复杂的代码，因此，对开发人员的要求非常高。
通过上述描述可见，现有技术开发数据可视化，需要开发人员编辑大量臃肿复杂的代码，从而导致数据可视化的开发难度大。
发明内容
本发明实施例提供了一种数据可视化方法及装置，能够降低数据可视化的开发难度。
第一方面，本发明实施例提供了一种数据可视化方法，包括：
预先搭建渐进式框架vue框架；
定义所述vue框架中的至少一个组件对应的功能；
定义每一个所述组件与预设的数据库的交互接口；
接收用户发送的可视化请求；
根据所述可视化请求和每一个所述组件对应的功能，将每一个所述组件展示给所述用户；
确定所述用户从展示的每一个所述组件中，选定的待展示组件；
根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据；
根据所述数据搭建图表，并将所述图表展示给所述用户。
优选地，所述定义所述vue框架中的每一个组件对应的功能，包括：
分别定义所述vue框架中的每一个所述组件对应的功能注册内容；
根据每一个所述组件对应的所述功能注册内容，分别定义每一个所述组件对应的组件属性，其中，所述组件属性，包括：所述组件的模块元素、展现样式和展现方式；
则，
所述根据所述可视化请求和每一个所述组件对应的功能，将每一个所述组件展示给所述用户，包括：
根据所述可视化请求，按照每一个所述组件对应的所述组件属性，展示每一个所述组件。
优选地，在所述接收用户发送的可视化请求之前，进一步包括：
设置异步交互代码，其中，所述异步交互代码，包括：axios代码或ajax代码；
所述根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据，包括：
利用所述异步交互代码，通过所述待展示组件对应的所述交互接口，向所述数据库发送数据申请；
获取所述数据库根据所述数据申请，返回的所述待展示组件对应的数据。
优选地，在所述将所述图表展示给所述用户之前，进一步包括：
解析预编译语言，并将解析后的所述预编译语言转换为叠层样式表CSS；
所述根据所述数据搭建图表，并将所述图表展示给所述用户，包括：
利用第三方库搭建所述数据对应的图表，其中，所述第三方库，包括：echarts.js或d3.js；
渲染所述图表所在的视区；
将渲染后的所述视区，按照所述CSS展示给所述用户。
优选地，在所述预先搭建渐进式框架vue框架之后，进一步包括：
将每一个所述组件对应的状态，记录在所述vue框架中的vuex中，其中，所述状态，包括：所述组件的被触发时长和/或被触发次数；
在所述确定所述用户从展示的每一个所述组件中，选定的待展示组件之后，进一步包括：
确定所述待展示组件对应的所述状态是否异常；
如果是，向所述用户发送警告信息。
第二方面，本发明实施例提供了一种数据可视化装置，包括：
框架搭建单元，用于预先搭建渐进式框架vue框架；
组件定义单元，用于定义所述框架搭建单元所述vue框架中的至少一个组件对应的功能；定义每一个所述组件与预设的数据库的交互接口；
通信处理单元，用于接收用户发送的可视化请求；根据所述可视化请求和所述组件定义单元定义的每一个所述组件对应的功能，将每一个所述组件展示给所述用户；确定所述用户从展示的每一个所述组件中，选定的待展示组件；根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据；
图表搭建单元，用于根据所述通信处理单元获取的所述数据搭建图表，并将所述图表展示给所述用户。
优选地，所述组件定义单元，用于分别定义所述vue框架中的每一个所述组件对应的功能注册内容；根据每一个所述组件对应的所述功能注册内容，分别定义每一个所述组件对应的组件属性，其中，所述组件属性，包括：所述组件的模块元素、展现样式和展现方式；
所述通信处理单元，用于根据所述可视化请求，按照每一个所述组件对应的所述组件属性，展示每一个所述组件。
优选地，所述组件定义单元，进一步用于设置异步交互代码，其中，所述异步交互代码，包括：axios代码或ajax代码；
所述通信处理单元，用于利用所述组件定义单元设置的所述异步交互代码，通过所述待展示组件对应的所述交互接口，向所述数据库发送数据申请；获取所述数据库根据所述数据申请，返回的所述待展示组件对应的数据。
优选地，所述组件定义单元，进一步用于解析预编译语言，并将解析后的所述预编译语言转换为叠层样式表CSS；
所述图表搭建单元，用于利用第三方库搭建所述数据对应的图表，其中，所述第三方库，包括：echarts.js或d3.js；渲染所述图表所在的视区；将渲染后的所述视区，按照所述组件定义单元确定的所述CSS展示给所述用户。
优选地，所述通信处理单元，进一步用于将每一个所述组件对应的状态，记录在所述vue框架中的vuex中，其中，所述状态，包括：所述组件的被触发时长和/或被触发次数；确定所述待展示组件对应的所述状态是否异常；如果是，向所述用户发送警告信息。
在本发明实施例中，通过搭建vue框架，可以通过定义vue框架中各个组件的功能和交互接口，对数据库中的数据进行绑定，当用户确定待展示组件后，即可从数据库中获取待展示组件对应的数据，并根据数据搭建图表，将搭建后的图表展示给用户即可实现数据可视化，而无需开发人员编辑大量臃肿复杂的代码，不仅能够实现无冗余代码，还可以降低数据可视化的开发难度。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明一实施例提供的一种数据可视化方法的流程图；
图2是本发明一实施例提供的另一种数据可视化方法的流程图；
图3是本发明一实施例提供的一种数据可视化装置的结构示意图；
图4是本发明一实施例提供的另一种数据可视化装置的结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，本发明实施例提供了一种数据可视化方法，包括：
步骤101：预先搭建渐进式框架vue框架；
步骤102：定义所述vue框架中的至少一个组件对应的功能；
步骤103：定义每一个所述组件与预设的数据库的交互接口；
步骤104：接收用户发送的可视化请求；
步骤105：根据所述可视化请求和每一个所述组件对应的功能，将每一个所述组件展示给所述用户；
步骤106：确定所述用户从展示的每一个所述组件中，选定的待展示组件；
步骤107：根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据；
步骤108：根据所述数据搭建图表，并将所述图表展示给所述用户。
在本发明实施例中，通过搭建vue框架，可以通过定义vue框架中各个组件的功能和交互接口，对数据库中的数据进行绑定，当用户确定待展示组件后，即可从数据库中获取待展示组件对应的数据，并根据数据搭建图表，将搭建后的图表展示给用户即可实现数据可视化，而无需开发人员编辑大量臃肿复杂的代码，不仅能够实现无冗余代码，还可以降低数据可视化的开发难度。
在本发明一实施例中，所述定义所述vue框架中的每一个组件对应的功能，包括：
分别定义所述vue框架中的每一个所述组件对应的功能注册内容；
根据每一个所述组件对应的所述功能注册内容，分别定义每一个所述组件对应的组件属性，其中，所述组件属性，包括：所述组件的模块元素、展现样式和展现方式；
则，
所述根据所述可视化请求和每一个所述组件对应的功能，将每一个所述组件展示给所述用户，包括：
根据所述可视化请求，按照每一个所述组件对应的所述组件属性，展示每一个所述组件。
在本发明实施例中，通过定义各个组件对应的功能注册内容，可以确定各个组件所包含的内容，并结合功能注册内容，定义各个组件对应的组件属性，即定义需要展示的模块元素、展示样式和展示方式，以使在接收到用户发送的可视化请求后，根据各个组件对应的组件属性展示每一个组件，以提高用户的视觉体验和使用体验。
在本发明一实施例中，在所述接收用户发送的可视化请求之前，进一步包括：
设置异步交互代码，其中，所述异步交互代码，包括：axios代码或ajax代码；
所述根据所述待展示组件对应的所述交互接口，从预设的数据库中获取所述待展示组件对应的数据，包括：
利用所述异步交互代码，通过所述待展示组件对应的所述交互接口，向所述数据库发送数据申请；
获取所述数据库根据所述数据申请，发送的所述待展示组件对应的数据。
在本发明实施例中，通过设置axios代码或ajax代码的异步交互代码，以及根据业务逻辑需求定义各个组件与数据库的交互接口，可以使得用户在选定待展示组件后，即触发待展示组件后，通过axios代码或ajax代码，即可从数据库中获取待展示组件对应数据，以便开发交互界面，即展示用户所要查看的数据，进而实现提高用户使用体验的目的。
在本发明一实施例中，在所述将所述图表展示给所述用户之前，进一步包括：
解析预编译语言，并将解析后的所述预编译语言转换为叠层样式表CSS；
所述根据所述数据搭建图表，并将所述图表展示给所述用户，包括：
利用第三方库搭建所述数据对应的图表，其中，所述第三方库，包括：echarts.js或d3.js；
渲染所述图表所在的视区；
将渲染后的所述视区，按照所述CSS展示给所述用户。
在本发明实施例中，通过转换编译器babel等手段对预编译语言进行解析，再根据展示需求转换成CSS，以及在从数据库中获取到待展示组件对应的数据后，通过第三方库echarts.js或d3.js，进行图表搭建与展示，再结合异步获取的数据，即可对视区进行渲染，以使用户可以看到生动形象的图表，从而实现提高用户的使用体验的目的。
在本发明一实施例中，在所述预先搭建渐进式框架vue框架之后，进一步包括：
将每一个所述组件对应的状态，记录在所述vue框架中的vuex中，其中，所述状态，包括：所述组件的被触发时长和/或被触发次数；
在所述确定所述用户从展示的每一个所述组件中，选定的待展示组件之后，进一步包括：
确定所述待展示组件对应的所述状态是否异常；
如果是，向所述用户发送警告信息。
在本发明实施例中，通过记录各个组件对应的状态，可以当用户误操作而导致待展示组件的状态异常时，向用户发送警告信息，以提示用户停止误操作，避免误操作造成过多资源的占用。
举例来说，预先设定各个组件在2s内被触发次数均为2次；
用户在2s内触发组件中的待展示组件的次数为5次，则向用户发送触发过频繁的警告信息。
为了更加清晰的说明本发明的技术方案及优点，下面对本发明实施例提供的一种数据可视化方法进行详细说明，具体包括以下步骤：
步骤201：预先搭建渐进式框架vue框架。
具体地，通过搭建vue框架，可以利用vue框架简单轻量、扩展性好、易于开发、跨平台等特性，实现对数据展示效果、界面布局进行管理，从而实现不依赖编程的快速开发，以缩短开发时长，减少工作量，降低开发门槛，从而降低数据可视化开发难度。
步骤202：分别定义vue框架中的每一个组件对应的功能注册内容。
具体地，在搭建vue框架后，即可定义vue框架中各个组件对应的功能，以使在接收到用户发送的数据化请求后，即可根据功能注册内容，将数据展示给用户。
举例来说，vue框架包括：组件a、组件b和组件c；
定义组件a的功能注册内容为：2017年企业收入总额；
定义组件b的功能注册内容为：2017年企业投资总额；
定义组件c的功能注册内容为：2017年企业支出总额。
步骤203：根据每一个组件对应的功能注册内容，分别定义每一个组件对应的组件属性，其中，组件属性，包括：组件的模块元素、展现样式和展现方式。
具体地，在定义各个组件对应的功能注册内容后，需要分别定义组件对应的组件属性，即定义组件需要展示的模块元素、定义展示样式，以及定义展示方式，以使在接收到用户发送的数据化请求后，按照组件属性将各个组件展示给用户，以使在视觉上体现各个组件的效果、形态和功能用途。
举例来说，定义组件a的模块元素为黄色、展现样式、展现方式为渐进式展示；
定义组件b的模块元素为蓝色、展现样式、展现方式渐进式展示；
定义组件c的模块元素为绿色、展现样式、展现方式直接展示。
步骤204：定义各个组件与预设的数据库对应的交互接口。
具体地，定义组件与数据库的前后端交互接口，可以使得在用户确定待展示组件后，利用待展示组件对应的交互接口，从数据库中获取数据，以使完整数据展示。
举例来说，定义组件a的交互接口为交互接口a；
定义组件b的交互接口为交互接口b；
定义组件c的交互接口为交互接口c。
步骤205：解析预编译语言，并将解析后的预编译语言转换为CSS。
具体地，通过第三方工具，例如babel等手段对预编译语言进行解析，并根据展示需要转换成CSS，以使按照CSS展示数据。
步骤206：在接收到用户发送的可视化请求时，按照每一个组件对应的组件属性，展示每一个组件。
具体地，在接收到用户发送的可视化请求后，需要按照组件属性展示每一个组件，将每一个组件以最突出、最引人注目的方式呈现出来，使得在视觉表现功能上能够体现出各个组件的效果、形态和功能用途。
步骤207：确定用户从展示的每一个组件中，选定的待展示组件。
具体地，用户可以根据实际需求，从各个组件中选定的待展示组件，即触发待展示组件，以使获取待展示组件对应的数据。
举例来说，将组件a、组件b和组件c分别按照对应的组件属性展示给用户，并确定用户从展示的组件a、组件b和组件c选定的待展示组件为组件c。
步骤208：利用设置的异步交互代码，通过待展示组件对应的交互接口，向数据库发送数据申请。
具体地，在接收到用户触发待展示组件所产生的指令后，即可利用异步交互代码，例如，axios或ajax向数据库申请待展示组件对应数据，以使向用户展示待展示组件对应的数据。
举例来说，利用异步交互代码axios，通过交互接口c向数据库发送数据申请。
步骤209：获取数据库根据数据申请，返回的待展示组件对应的数据。
具体地，通过axios或ajax的异步交互代码，即可获取数据库返回的待展示组件对应的数据，以使对数据进行预处理，并将处理后的数据展示给用户。
举例来说，利用异步交互代码axios，通过交互接口c获取数据库返回的企业支出总额的数据。
步骤210：利用第三方库搭建数据对应的图表，其中，第三方库，包括：echarts.js或d3.js。
具体地，在获取到待展示组件对应的数据后，即可通过第三方库，例如echarts.js或d3.js，根据数据搭建图表，以使将数据转化为直观、形象的可视化图表。而用图标表达各种数据信息，能让用户更清晰、更有效率的处理繁琐的数据，从而帮助用户快速且直观的得到数据想要表现的内容。
举例来说，利用第三方库echarts.js根据数据为企业支出总额，搭建图表。
步骤211：渲染图表所在的视区。
具体地，通过对视区渲染，可以使得给用户展示的视区更形象生动，从而能够提高用户的使用体验。
步骤212：将渲染后的视区，按照CSS展示给用户。
具体地，在进行视区渲染后，即可按照数据表现方式将图表展示给用户。
举例来说，在对视区进行渲染后，按照CSS展示图表。
综上可见，本发明实施例提供的一种数据可视化方法，在开发web应用领域有着极大的优势，拥有灵活轻量的语言、优雅的组件定义模式、高扩展性、后期维护的低复杂度、MVVM框架、专注视图层、丰富的界面定义、多种周边工具及插件、流行性、代码压缩性、自动任务、npm包依赖支持等众多特性。同时，本发明实施例提供的一种数据可视化方法，其目的是让用户有更好的使用体验，相较于臃肿项目，本方法可完成轻量化部署，去除重复代码，实现代码高复用。达到部署文件小，性能高，加载时间短，无冗余代码的目的，极大提高用户体验。通过本方法能够方便的扩展应用，在维护时仅对对应的组件进行更改或添加即可，并且组件可以复用，达到一次定义多次使用的目的。本发明实施例提供的一种数据可视化方法可以为web应用，故可在任何拥有可用浏览器的平台使用，无需搭建环境、安装服务等复杂步骤。
如图3所示，本发明实施例提供了一种数据可视化装置，包括：
框架搭建单元301，用于预先搭建渐进式框架vue框架；
组件定义单元302，用于定义所述框架搭建单元301所述vue框架中的至少一个组件对应的功能；定义每一个所述组件与预设的数据库的交互接口；
通信处理单元303，用于接收用户发送的可视化请求；根据所述可视化请求和所述组件定义单元302定义的每一个所述组件对应的功能，将每一个所述组件展示给所述用户；确定所述用户从展示的每一个所述组件中，选定的待展示组件；根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据；
图表搭建单元304，用于根据所述通信处理单元303获取的所述数据搭建图表，并将所述图表展示给所述用户。
在本发明实施例中，通过框架单元搭建vue框架，可以通过组件定义单元定义vue框架中各个组件的功能和交互接口，对数据库中的数据进行绑定，当通信处理单元确定用户选定待展示组件后，即可从数据库中获取待展示组件对应的数据，并通过图表搭建单元根据通信处理单元获取的数据搭建图表，将搭建后的图表展示给用户即可实现数据可视化，而无需开发人员编辑大量臃肿复杂的代码，不仅能够实现无冗余代码，还可以降低数据可视化的开发难度。
在本发明一实施例中，所述组件定义单元，用于分别定义所述vue框架中的每一个所述组件对应的功能注册内容；根据每一个所述组件对应的所述功能注册内容，分别定义每一个所述组件对应的组件属性，其中，所述组件属性，包括：所述组件的模块元素、展现样式和展现方式；
所述通信处理单元，用于根据所述可视化请求，按照每一个所述组件对应的所述组件属性，展示每一个所述组件。
在本发明一实施例中，所述组件定义单元，进一步用于设置异步交互代码，其中，所述异步交互代码，包括：axios代码或ajax代码；
所述通信处理单元，用于利用所述组件定义单元设置的所述异步交互代码，通过所述待展示组件对应的所述交互接口，向所述数据库发送数据申请；获取所述数据库根据所述数据申请，返回的所述待展示组件对应的数据。
基于图3所示的一种数据可视化装置，如图4所示，在本发明一实施例中，所述组件定义单元302，进一步用于解析预编译语言，并将解析后的所述预编译语言转换为叠层样式表CSS；
所述图表搭建单元304，用于利用第三方库搭建所述数据对应的图表，其中，所述第三方库，包括：echarts.js或d3.js；渲染所述图表所在的视区；将渲染后的所述视区，按照所述组件定义单元302确定的所述CSS展示给所述用户。
在本发明一实施例中，所述通信处理单元，进一步用于将每一个所述组件对应的状态，记录在所述vue框架中的vuex中，其中，所述状态，包括：所述组件的被触发时长和/或被触发次数；确定所述待展示组件对应的所述状态是否异常；如果是，向所述用户发送警告信息。
本发明各个实施例至少具有如下有益效果：
1、在本发明一实施例中，通过搭建vue框架，可以通过定义vue框架中各个组件的功能和交互接口，对数据库中的数据进行绑定，当用户确定待展示组件后，即可从数据库中获取待展示组件对应的数据，并根据数据搭建图表，将搭建后的图表展示给用户即可实现数据可视化，而无需开发人员编辑大量臃肿复杂的代码，不仅能够实现无冗余代码，还可以降低数据可视化的开发难度。
2、在本发明一实施例中，通过定义各个组件对应的功能注册内容，可以确定各个组件所包含的内容，并结合功能注册内容，定义各个组件对应的组件属性，即定义需要展示的模块元素、展示样式和展示方式，以使在接收到用户发送的可视化请求后，根据各个组件对应的组件属性展示每一个组件，以提高用户的视觉体验和使用体验。
3、在本发明一实施例中，通过设置axios代码或ajax代码的异步交互代码，以及根据业务逻辑需求定义各个组件与数据库的交互接口，可以使得用户在选定待展示组件后，即触发待展示组件后，通过axios代码或ajax代码，即可从数据库中获取待展示组件对应数据，以便开发交互界面，即展示用户所要查看的数据，进而实现提高用户使用体验的目的。
4、在本发明一实施例中，通过转换编译器babel等手段对预编译语言进行解析，再根据展示需求转换成CSS，以及在从数据库中获取到待展示组件对应的数据后，通过第三方库echarts.js或d3.js，进行图表搭建与展示，再结合异步获取的数据，即可对视区进行渲染，以使用户可以看到生动形象的图表，从而实现提高用户的使用体验的目的。
5、在本发明一实施例中，通过记录各个组件对应的状态，可以当用户误操作而导致待展示组件的状态异常时，向用户发送警告信息，以提示用户停止误操作，避免误操作造成过多资源的占用。
需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个······”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。
最后需要说明的是：以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。
Claims (10)
1.一种数据可视化方法，其特征在于，包括：
预先搭建渐进式框架vue框架；
定义所述vue框架中的至少一个组件对应的功能；
定义每一个所述组件与预设的数据库的交互接口；
接收用户发送的可视化请求；
根据所述可视化请求和每一个所述组件对应的功能，将每一个所述组件展示给所述用户；
确定所述用户从展示的每一个所述组件中，选定的待展示组件；
根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据；
根据所述数据搭建图表，并将所述图表展示给所述用户。
2.根据权利要求1所述的方法，其特征在于，
所述定义所述vue框架中的每一个组件对应的功能，包括：
分别定义所述vue框架中的每一个所述组件对应的功能注册内容；
根据每一个所述组件对应的所述功能注册内容，分别定义每一个所述组件对应的组件属性，其中，所述组件属性，包括：所述组件的模块元素、展现样式和展现方式；
则，
所述根据所述可视化请求和每一个所述组件对应的功能，将每一个所述组件展示给所述用户，包括：
根据所述可视化请求，按照每一个所述组件对应的所述组件属性，展示每一个所述组件。
3.根据权利要求1所述的方法，其特征在于，
在所述接收用户发送的可视化请求之前，进一步包括：
设置异步交互代码，其中，所述异步交互代码，包括：axios代码或ajax代码；
所述根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据，包括：
利用所述异步交互代码，通过所述待展示组件对应的所述交互接口，向所述数据库发送数据申请；
获取所述数据库根据所述数据申请，返回的所述待展示组件对应的数据。
4.根据权利要求1所述的方法，其特征在于，
在所述将所述图表展示给所述用户之前，进一步包括：
解析预编译语言，并将解析后的所述预编译语言转换为叠层样式表CSS；
所述根据所述数据搭建图表，并将所述图表展示给所述用户，包括：
利用第三方库搭建所述数据对应的图表，其中，所述第三方库，包括：echarts.js或d3.js；
渲染所述图表所在的视区；
将渲染后的所述视区，按照所述CSS展示给所述用户。
5.根据权利要求1至4中任一所述的方法，其特征在于，
在所述预先搭建渐进式框架vue框架之后，进一步包括：
将每一个所述组件对应的状态，记录在所述vue框架中的vuex中，其中，所述状态，包括：所述组件的被触发时长和/或被触发次数；
在所述确定所述用户从展示的每一个所述组件中，选定的待展示组件之后，进一步包括：
确定所述待展示组件对应的所述状态是否异常；
如果是，向所述用户发送警告信息。
6.一种数据可视化装置，其特征在于，包括：
框架搭建单元，用于预先搭建渐进式框架vue框架；
组件定义单元，用于定义所述框架搭建单元所述vue框架中的至少一个组件对应的功能；定义每一个所述组件与预设的数据库的交互接口；
通信处理单元，用于接收用户发送的可视化请求；根据所述可视化请求和所述组件定义单元定义的每一个所述组件对应的功能，将每一个所述组件展示给所述用户；确定所述用户从展示的每一个所述组件中，选定的待展示组件；根据所述待展示组件对应的所述交互接口，从所述数据库获取所述待展示组件对应的数据；
图表搭建单元，用于根据所述通信处理单元获取的所述数据搭建图表，并将所述图表展示给所述用户。
7.根据权利要求6所述的装置，其特征在于，
所述组件定义单元，用于分别定义所述vue框架中的每一个所述组件对应的功能注册内容；根据每一个所述组件对应的所述功能注册内容，分别定义每一个所述组件对应的组件属性，其中，所述组件属性，包括：所述组件的模块元素、展现样式和展现方式；
所述通信处理单元，用于根据所述可视化请求，按照每一个所述组件对应的所述组件属性，展示每一个所述组件。
8.根据权利要求6所述的装置，其特征在于，
所述组件定义单元，进一步用于设置异步交互代码，其中，所述异步交互代码，包括：axios代码或ajax代码；
所述通信处理单元，用于利用所述组件定义单元设置的所述异步交互代码，通过所述待展示组件对应的所述交互接口，向所述数据库发送数据申请；获取所述数据库根据所述数据申请，返回的所述待展示组件对应的数据。
9.根据权利要求6所述的装置，其特征在于，
所述组件定义单元，进一步用于解析预编译语言，并将解析后的所述预编译语言转换为叠层样式表CSS；
所述图表搭建单元，用于利用第三方库搭建所述数据对应的图表，其中，所述第三方库，包括：echarts.js或d3.js；渲染所述图表所在的视区；将渲染后的所述视区，按照所述CSS展示给所述用户。
10.根据权利要求6至9中任一所述的装置，其特征在于，
所述通信处理单元，进一步用于将每一个所述组件对应的状态，记录在所述vue框架中的vuex中，其中，所述状态，包括：所述组件的被触发时长和/或被触发次数；确定所述待展示组件对应的所述状态是否异常；如果是，向所述用户发送警告信息。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810554647.7A CN108829381A (zh) | 2018-06-01 | 2018-06-01 | 一种数据可视化方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810554647.7A CN108829381A (zh) | 2018-06-01 | 2018-06-01 | 一种数据可视化方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108829381A true CN108829381A (zh) | 2018-11-16 |
Family
ID=64146726
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810554647.7A Pending CN108829381A (zh) | 2018-06-01 | 2018-06-01 | 一种数据可视化方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108829381A (zh) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109871524A (zh) * | 2019-02-21 | 2019-06-11 | 腾讯科技（深圳）有限公司 | 一种图表生成方法及装置 |
| CN109885226A (zh) * | 2019-02-21 | 2019-06-14 | 山东浪潮云信息技术有限公司 | 一种基于Vue.js实现二级导航菜单的方法 |
| CN110018821A (zh) * | 2019-04-09 | 2019-07-16 | 苏州浪潮智能科技有限公司 | 一种处理网页信息的方法及装置 |
| CN110531976A (zh) * | 2019-09-02 | 2019-12-03 | 浪潮云信息技术有限公司 | 一种可视化大屏中组件化配制图表的方法 |
| CN110688115A (zh) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | 生成界面的方法和装置 |
| CN110908894A (zh) * | 2019-10-11 | 2020-03-24 | 苏宁云计算有限公司 | 一种基于vuex的可视化报表工具自动化测试方法及装置 |
| CN111312345A (zh) * | 2019-09-06 | 2020-06-19 | 北京交通大学 | 医疗数据智能可视化方法及装置 |
| CN111813402A (zh) * | 2020-07-07 | 2020-10-23 | 北京亚鸿世纪科技发展有限公司 | 数据可视化开发用的拖拽开发组件及事件交互定义器 |
| CN112688992A (zh) * | 2020-12-15 | 2021-04-20 | 金现代信息产业股份有限公司 | vue环境下展示流程图审核状态的方法和装置 |
| CN113641926A (zh) * | 2021-07-21 | 2021-11-12 | 深圳市六度人和科技有限公司 | 信息显示方法、设备及存储介质 |
| CN114239841A (zh) * | 2021-11-24 | 2022-03-25 | 浪潮集团有限公司 | 投影实时变化的可视化展示方法、系统及量子计算云平台 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104376068A (zh) * | 2014-11-07 | 2015-02-25 | 北京思特奇信息技术股份有限公司 | 一种基于动态报表模板的数据展现系统及方法 |
| CN106302008A (zh) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | 数据更新方法和装置 |
| CN107491528A (zh) * | 2017-08-18 | 2017-12-19 | 深圳易嘉恩科技有限公司 | 一种用于数据资产化基础平台进行可视化操作的树形控件 |
| CN107577515A (zh) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | 可视化组件的扩展方法、装置、电子设备及存储介质 |
| CN107832038A (zh) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | 组件库的实现方法及装置 |
-
2018
- 2018-06-01 CN CN201810554647.7A patent/CN108829381A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104376068A (zh) * | 2014-11-07 | 2015-02-25 | 北京思特奇信息技术股份有限公司 | 一种基于动态报表模板的数据展现系统及方法 |
| CN106302008A (zh) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | 数据更新方法和装置 |
| CN107491528A (zh) * | 2017-08-18 | 2017-12-19 | 深圳易嘉恩科技有限公司 | 一种用于数据资产化基础平台进行可视化操作的树形控件 |
| CN107577515A (zh) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | 可视化组件的扩展方法、装置、电子设备及存储介质 |
| CN107832038A (zh) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | 组件库的实现方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 易泽顺: "基于Web的数据可视化工具设计与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109885226B (zh) * | 2019-02-21 | 2021-06-11 | 浪潮云信息技术股份公司 | 一种基于Vue.js实现二级导航菜单的方法 |
| CN109885226A (zh) * | 2019-02-21 | 2019-06-14 | 山东浪潮云信息技术有限公司 | 一种基于Vue.js实现二级导航菜单的方法 |
| CN109871524A (zh) * | 2019-02-21 | 2019-06-11 | 腾讯科技（深圳）有限公司 | 一种图表生成方法及装置 |
| CN110018821A (zh) * | 2019-04-09 | 2019-07-16 | 苏州浪潮智能科技有限公司 | 一种处理网页信息的方法及装置 |
| CN110531976A (zh) * | 2019-09-02 | 2019-12-03 | 浪潮云信息技术有限公司 | 一种可视化大屏中组件化配制图表的方法 |
| CN111312345A (zh) * | 2019-09-06 | 2020-06-19 | 北京交通大学 | 医疗数据智能可视化方法及装置 |
| CN110688115A (zh) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | 生成界面的方法和装置 |
| CN110908894A (zh) * | 2019-10-11 | 2020-03-24 | 苏宁云计算有限公司 | 一种基于vuex的可视化报表工具自动化测试方法及装置 |
| CN111813402A (zh) * | 2020-07-07 | 2020-10-23 | 北京亚鸿世纪科技发展有限公司 | 数据可视化开发用的拖拽开发组件及事件交互定义器 |
| CN112688992A (zh) * | 2020-12-15 | 2021-04-20 | 金现代信息产业股份有限公司 | vue环境下展示流程图审核状态的方法和装置 |
| CN113641926A (zh) * | 2021-07-21 | 2021-11-12 | 深圳市六度人和科技有限公司 | 信息显示方法、设备及存储介质 |
| CN113641926B (zh) * | 2021-07-21 | 2024-05-07 | 深圳市六度人和科技有限公司 | 信息显示方法、设备及存储介质 |
| CN114239841A (zh) * | 2021-11-24 | 2022-03-25 | 浪潮集团有限公司 | 投影实时变化的可视化展示方法、系统及量子计算云平台 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108829381A (zh) | 一种数据可视化方法及装置 | |
| CN101122921B (zh) | 基于ajax与html标记形成树形显示结构的方法 | |
| CN102184184B (zh) | 一种网页动态信息获取方法 | |
| CN106843835A (zh) | 一种元数据定制的应用系统软件构建系统、系统构建方法 | |
| CN106648690A (zh) | 一种代码自动生成方法及装置 | |
| CN102135972A (zh) | 业务树数据处理方法、系统、客户端和服务器 | |
| CN104484216A (zh) | 服务接口文档和在线测试工具生成方法、装置 | |
| CN104380280A (zh) | 动态转换网页的系统、方法以及计算机可读记录介质 | |
| CN110704047B (zh) | 一种动态可视化配置系统及基于该系统的运营管理方法 | |
| CN106325856A (zh) | 一种实现Elasticsearch Dsl规则可视化编辑和数据展现的方法与系统 | |
| CN101082865A (zh) | 基于数据驱动的界面自动生成方法 | |
| CN111324390A (zh) | 实现app内容可配置和实时更新的装置及方法 | |
| CN101567030A (zh) | 构建古代建筑木结构虚拟保护修缮系统的方法 | |
| CN105653597A (zh) | 多端同步播放文件的方法和装置 | |
| CN109271561A (zh) | 一种图谱信息检索方法及装置 | |
| CN108897530A (zh) | 一种基于组件模块的教育开发系统 | |
| CN103595742B (zh) | 调试网页css的方法及装置 | |
| CN107436785B (zh) | 基于信息系统的Revit软件信息交互系统及交互方法 | |
| CN103109289A (zh) | 基于web的脚本语言编辑方法、系统和web客户端 | |
| CN110020261A (zh) | 文档转换分享方法、装置、设备及可读存储介质 | |
| CN108959439B (zh) | 一种数据模板生成方法及系统 | |
| CN112306622B (zh) | 一种vnf模板的构建方法及装置 | |
| CN102567066B (zh) | 业务系统开发方法、平台及系统 | |
| CN110909017B (zh) | 数据分析方法和系统 | |
| Tian | Application and analysis of artificial intelligence graphic element algorithm in digital media art design |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20181116 |
|
| RJ01 | Rejection of invention patent application after publication |