多数据源可配置图表智能生成可视化大屏的方法

技术领域

本发明涉及计算机技术领域，特别涉及一种多数据源可配置图表智能生成可视化大屏的方法。

背景技术

智能运营中心（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）大屏提供了技术支撑和应用平台的方法。

需要说明的是，在本说明书中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包含……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

尽管本发明的内容已经通过上述优选实施例作了详细介绍，但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后，对于本发明的多种修改和替代都将是显而易见的。因此，本发明的保护范围应由所附的权利要求来限定。