CN113849554A - 多数据源可配置图表智能生成可视化大屏的方法 - Google Patents
多数据源可配置图表智能生成可视化大屏的方法 Download PDFInfo
- Publication number
- CN113849554A CN113849554A CN202110947760.3A CN202110947760A CN113849554A CN 113849554 A CN113849554 A CN 113849554A CN 202110947760 A CN202110947760 A CN 202110947760A CN 113849554 A CN113849554 A CN 113849554A
- Authority
- CN
- China
- Prior art keywords
- chart
- data
- data source
- charts
- large screen
- 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
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/26—Visual data mining; Browsing structured data
-
- 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/22—Indexing; Data structures therefor; Storage structures
- G06F16/2282—Tablespace storage structures; Management thereof
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种多数据源可配置图表智能生成可视化大屏的方法，包含如下步骤：获取自定义参数；按照定义数据格式导入自定义参数并获取目标数据源；确定需要目标数据源的封装Echart函数的图表类型，通过接口适配器将目标数据源融合到选定的图表类型，完成图表的配置选择；框选任一个画布，将适配成功的图表拖拽到画布内任意位置，形成图表集合；根据画布中的图表集合实现最优化自动布局；推送图表集合数据至服务端储存，生成随机Url链接；预览Url链接生成随机web应用于多终端。本发明针对行业海量数据提供具有强大的数据接入能力、丰富的可视化组件、自助式编排、交互式设计的可视化大屏，可进一步解决智慧城市等衍生行业的数据可视化问题。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种多数据源可配置图表智能生成可视化大屏的方法。
背景技术
智能运营中心（Intelligent operation center）大屏的可视化应用随着大数据技术的高速发展，各行业产生海量的数据需要多场景展示，应运而生的一站式数据可视化展示平台在市场上需求不断，但是目前存在交付时间长、主题效果不出色、业务场景不明确、多数据源接入困难等技术壁垒。
发明内容
根据本发明实施例，提供了一种多数据源可配置图表智能生成可视化大屏的方法，包含如下步骤：
获取自定义参数；
按照定义数据格式导入自定义参数并获取目标数据源；
确定需要目标数据源的封装Echart函数的图表类型，通过接口适配器将目标数据源融合到选定的图表类型，完成图表的配置选择；
框选任一个画布，将适配成功的图表拖拽到画布内任意位置，形成图表集合；
根据画布中的图表集合实现最优化自动布局；
推送图表集合数据至服务端储存，生成随机Url链接；
预览Url链接生成随机web应用于多终端。
进一步，定义数据格式是指按主题字段定义的一套JSON数据，数据库里面的表结构字段，自定义参数可对应填入匹配。
进一步，主题字段包含但不限于：字符串型字段、布尔型字段、数字型字段、对象型字段、数组型字段、Null型字段以及Undefined型字段。
进一步，封装Echart函数对外暴露参数，且与主题字段做好参数适配，还可根据风格要求进行选择封装Echart函数自定义配置。
进一步，封装Echart函数自定义配置包含但不限于：图表类型、图表颜色、图表字体大小、图表数据以及绑定事件的回调函数。
进一步，图表类型包含但不限于饼状图、折线图、条状图、柱形图、雷达图以及仪表盘；图表颜色包含但不限于主题色、默认色、辅助色以及点晴色；图表数据包含但不限于标题、提示框、图例、横坐标以及纵坐标；绑定事件包含但不限于跳转、悬浮以及触发。
进一步，接口适配器是指按照主题字段，利用sql语句进行字段并集、交集、是非集等组装图表类型产生JSON数据，直到自定义参数适配成功，并通过定时器定时从数据库调用最新字段数据，完成图表的配制选择。
进一步，选择图表集合的任一块，可实现图表自定义配置增加、删除、修改。
进一步，最优化自动布局包含：统一画板、左右上下动态部件以及网格化。
根据本发明实施例的多数据源可配置图表智能生成可视化大屏的方法，针对行业海量数据提供具有强大的数据接入能力、丰富的可视化组件、自助式编排、交互式设计的可视化大屏，可进一步解决智慧城市等衍生行业的数据可视化问题，为实现一屏多管的服务提供支撑。
要理解的是，前面的一般描述和下面的详细描述两者都是示例性的，并 且意图在于提供要求保护的技术的进一步说明。
附图说明
图1为根据本发明实施例多数据源可配置图表智能生成可视化大屏的方法的流程图。
具体实施方式
以下将结合附图，详细描述本发明的优选实施例，对本发明做进一步阐述。
首先，将结合图1描述根据本发明实施例的多数据源可配置图表智能生成可视化大屏的方法，用于智慧城市的智能运营中心（IOC）大屏，其应用场景很广。
如图1所示，本发明实施例的多数据源可配置图表智能生成可视化大屏的方法，具有如下步骤：
在S1中，如图1所示，获取自定义参数。
在S2中，如图1所示，按照定义数据格式导入自定义参数并获取目标数据源。定义数据格式是指按主题字段定义的一套JSON数据，数据库里面的表结构字段，每一套JSON数据都是主题库确认预制成功的，提供的自定义参数可对应填入匹配，匹配方法主要方式通过Http协议和SQL语句查询，匹配成功与否都会给出相应提示和建议。
在S3中，如图1所示，确定需要目标数据源的封装Echart函数的图表类型，通过接口适配器将目标数据源融合到选定的图表类型，完成图表的配置选择。封装Echart函数对外暴露参数，其与主题字段做好参数适配，还可根据风格要求封装Echart函数自定义配置进行选择；其中主题字段具体包含：字符串型字段、布尔型字段、数字型字段、对象型字段、数组型字段、Null型字段、Undefined型字段；进一步，封装Echart函数自定义配置包含：图表类型，图表颜色、字体大小，图表数据，绑定事件的回调函数；图表类型包含但不限于饼状图、折线图、条状图、柱形图、雷达图以及仪表盘；图表颜色包含但不限于主题色、默认色、辅助色以及点晴色；图表数据包含但不限于标题、提示框、图例、横坐标以及纵坐标；绑定事件包含但不限于跳转、悬浮以及触发；然后接口适配器具体是指按照主题库字段，利用sql语句进行字段并集、交集、是非集等组装图表类型产生JSON数据，直到自定义参数适配成功，并且设置定时器，定时从数据库调用最新字段数据，即可完成图表的配置选择。
在S4中，如图1所示，框选任一个画布，将适配成功的图表拖拽到画布内任意位置，形成图表集合。选择图表集合任意一块，也可进行图表自定义配置的增加、删除、修改，进行图表集的数据重组。
在S5中，如图1所示，根据画布中所有图表实现最优化自动布局，具体包括：统一画板、左右上下动态布局、网格化；
常规画板分辨率为1920*1080，4K高清屏幕分辨率4096*2160，CSS样式采用rem、pt等计量单位，可适配多端分辨率设备。
动态布局采用flex布局和百分比布局，等比例伸缩实现动态布局，网格化；随意拖拽的图表布局，根据浏览器网页（内容）可见区域高宽，采用亲密性、对齐、对比的设计原则，自动布局到最优。
在S6中，如图1所示，推送图表集合数据至服务端储存，生成随机Url链接。将图表数据通过Http协议推送到服务端储存，根据单页面组件路由动态生成随机Url链接；封装Echart函数生成sdk包，提供对外参数函数，对画布中对图表集合，将图表自定义配置和接口数据作为传参，通过http协议推送到服务端储存，对当前画布图层随机产生唯一标识号（ID）,动态加载到单页面路由生成url；
进一步，再次请求获取服务端回调参数，对储存数据重绘，以实现数据和页面分离，提高渲染效率和令牌认证。
在S7中，如图1所示，预览Url链接生成随机web应用于多终端。
以上，参照图1描述了根据本发明实施例的多数据源可配置图表智能生成可视化大屏的方法，针对多数据源参数可配置图表生成可视化大屏的方法，为低代码化、高效运维、快速生成智慧城市的智能运营中心（IOC）大屏提供了技术支撑和应用平台的方法。
需要说明的是，在本说明书中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包含……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
尽管本发明的内容已经通过上述优选实施例作了详细介绍，但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后，对于本发明的多种修改和替代都将是显而易见的。因此，本发明的保护范围应由所附的权利要求来限定。
Claims (9)
1.一种多数据源可配置图表智能生成可视化大屏的方法，其特征在于，包含如下步骤：
获取自定义参数；
按照定义数据格式导入所述自定义参数并获取目标数据源；
确定需要所述目标数据源的封装Echart函数的图表类型，通过接口适配器将所述目标数据源融合到选定的所述图表类型，完成图表的配置选择；
框选任一个画布，将适配成功的所述图表拖拽到所述画布内任意位置，形成图表集合；
根据所述画布中的所述图表集合实现最优化自动布局；
推送所述图表集合数据至服务端储存，生成随机Url链接；
预览所述Url链接生成随机web应用于多终端。
2.如权利要求1所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，所述定义数据格式是指按主题字段定义的一套JSON数据，数据库里面的表结构字段，所述自定义参数可对应填入匹配。
3.如权利要求2所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，所述主题字段包含但不限于：字符串型字段、布尔型字段、数字型字段、对象型字段、数组型字段、Null型字段以及Undefined型字段。
4.如权利要求2所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，所述封装Echart函数对外暴露参数，且与所述主题字段做好参数适配，还可根据风格要求进行选择所述封装Echart函数自定义配置。
5.如权利要求4所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，所述封装Echart函数自定义配置包含但不限于：图表类型、图表颜色、图表字体大小、图表数据以及绑定事件的回调函数。
6.如权利要求5所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，所述图表类型包含但不限于饼状图、折线图、条状图、柱形图、雷达图以及仪表盘；所述图表颜色包含但不限于主题色、默认色、辅助色以及点晴色；所述图表数据包含但不限于标题、提示框、图例、横坐标以及纵坐标；所述绑定事件包含但不限于跳转、悬浮以及触发。
7.如权利要求2所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，所述接口适配器是指按照所述主题字段，利用sql语句进行字段并集、交集、是非集等组装图表类型产生JSON数据，直到所述自定义参数适配成功，并通过定时器定时从数据库调用最新字段数据，完成图表的配制选择。
8.如权利要求1所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，选择所述图表集合的任一块，可实现图表自定义配置增加、删除、修改。
9.如权利要求1所述多数据源可配置图表智能生成可视化大屏的方法，其特征在于，所述最优化自动布局包含：统一画板、左右上下动态部件以及网格化。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110947760.3A CN113849554A (zh) | 2021-08-18 | 2021-08-18 | 多数据源可配置图表智能生成可视化大屏的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110947760.3A CN113849554A (zh) | 2021-08-18 | 2021-08-18 | 多数据源可配置图表智能生成可视化大屏的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113849554A true CN113849554A (zh) | 2021-12-28 |
Family
ID=78975871
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110947760.3A Pending CN113849554A (zh) | 2021-08-18 | 2021-08-18 | 多数据源可配置图表智能生成可视化大屏的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113849554A (zh) |
-
2021
- 2021-08-18 CN CN202110947760.3A patent/CN113849554A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109597614B (zh) | 一种业务页面定制方法及系统 | |
| JP2022534214A (ja) | 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法 | |
| CN101202748B (zh) | 一种嵌入式设备的微浏览器浏览网页的方法及嵌入式设备的微浏览器 | |
| WO2009078020A2 (en) | System and method for automatic creation of web content for mobile communicators | |
| CN103336691A (zh) | 一种基于Android的动态布局方法及系统 | |
| CN105338410A (zh) | 视频的弹幕显示方法及装置 | |
| KR20170031791A (ko) | 디스플레이 내용 중 일부 숨기기 | |
| CN105096363A (zh) | 一种编辑图片的方法及图片编辑装置 | |
| CN111611518A (zh) | 基于Html5的可视化展示页面自动发布方法及系统 | |
| US20070157082A1 (en) | Web portal layout manager system and method | |
| CN112015509A (zh) | 数据可视化大屏的构建方法、电子设备及存储介质 | |
| JP2007305044A (ja) | パーツカタログ作成方法およびパーツカタログ作成装置およびプログラムおよびパーツカタログ表示装置 | |
| CN106658220A (zh) | 字幕创建装置、展示模块以及字幕创建展示系统 | |
| CN109885301B (zh) | 一种可缩放矢量图形的生成方法、装置、存储介质和设备 | |
| CN103414950A (zh) | 一种界面展示方法、装置、机顶盒和服务器 | |
| CN107861711B (zh) | 页面适配方法及装置 | |
| CN103279902A (zh) | 电子菜谱显示方法 | |
| CN114706584A (zh) | 一种数据可视化展示制作系统 | |
| CN113849554A (zh) | 多数据源可配置图表智能生成可视化大屏的方法 | |
| US20060184913A1 (en) | Method, system, and program product for extending java server faces web pages to support multiple devices | |
| CN109684751B (zh) | 一种装配式建筑的大样图调用方法、装置、设备及系统 | |
| CN114546577B (zh) | 一种数据可视化方法及系统 | |
| CN114387940B (zh) | 一种led显示屏的分区显示更新方法、播放盒及显示系统 | |
| CN106649724B (zh) | 信息显示方法、装置及用户终端 | |
| US7127453B1 (en) | Gathering data from a database for display |
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 |