CN107330053A

CN107330053A - 基于ReactJS的可视化设计器及数据大屏制作方法

Info

Publication number: CN107330053A
Application number: CN201710511417.8A
Authority: CN
Inventors: 殷晋
Original assignee: Beijing Secret Number Measurement Data Technology Co Ltd
Current assignee: Beijing Secret Number Measurement Data Technology Co Ltd
Priority date: 2017-06-27
Filing date: 2017-06-27
Publication date: 2017-11-07

Abstract

本发明涉及一种基于ReactJS的可视化设计器及数据大屏制作方法，设计器包括：组件库，其中具有若干预定组件；设计模块，供用户利用从组件库中选择的组件实现所见即所得的数据大屏幕制作；数据模型模块，供用户创建数据模型，定义数据大屏幕中所用到的数据，并绑定数据模型到组件；以及事件模块，基于JS事件机制，在组件间和/或数据模型间实现交互联动和消息传递。本发明可以通过丰富的组件库组装制作数据大屏幕，用户无需为制作各种各样的组件而花费大量时间，且可以通过数据模型快速地定义需要呈现的所有数据，之后利用事件机制和自定义函数，实现不同组件间的事件联动，展现数据分析动态效果，完成更高级的视觉效果和事件交互。

Description

基于ReactJS的可视化设计器及数据大屏制作方法

技术领域

本发明属于数据可视化技术领域，具体涉及一种基于ReactJS的可视化设计器，主要用于实现数据化大屏的可视化制作。

背景技术

现有的数据可视化技术，一般是通过简单的表格、图表做成可拖拽式的仪表盘，支持的组件少，可展示的数据受限，风格样式单调，投影在大屏幕上的效果不佳，不能支持与用户的事件交互，无法呈现出震撼的视觉效果。

发明内容

为了解决现有技术的上述问题，本发明提供一种基于ReactJS的可视化设计器，其通过在线可视化设计器、丰富的组件库、数据模型和事件的支持，实现快速高效的制作数据大屏幕。

本发明还提供一种基于ReactJS的可视化大屏的制作方法，其可以实现数据大屏幕的快速高效制作。

为了达到上述目的，本发明采用的主要技术方案包括：

一种基于ReactJS的可视化设计器，其包括：

组件库，其中具有若干预定组件；

设计模块，供用户利用从组件库中选择的组件实现所见即所得的数据大屏幕制作；

数据模型模块，供用户创建数据模型，定义数据大屏幕中所用到的数据，并绑定数据模型到组件；

事件模块，基于JS事件机制，在组件间和/或数据模型间实现交互联动和消息传递。

借助上述方案，本发明的可视化设计器，可以通过丰富的组件库组装制作数据大屏幕，用户不再需要为制作各种各样的组件而花费大量的时间，而数据模型可以很快速地定义需要呈现的所有数据，还可以利用事件机制进行事件交互，实现不同组件间的事件联动，展现数据分析动态效果。

其中，可以基于已有可视化引擎，封装highcharts、echarts、d3js、threejs、webgl(3D)组件库，实现数据的可视化展示效果。

其中，组件库的组件可以综合游戏、浏览器插件等技术元素，基于WebGL进行封装，支持开源90％以上的开源组件图形，可以基于已有组件进行无限扩展，支持GPU的3D高效渲染。

其中，组件库可以是开放式的组件市场，用户可以在线制作并发布自定义组件，分享到组件市场，同时也可以从组件市场中挑选组件应用到数据大屏幕中。

其中，设计模块包括在线大屏设计器，可以设置大屏的颜色、背景、标题以及尺寸等。

其中，设计模块可以通过拖拽的方式从组件库中选择需要的组件，并设置组件的属性样式和选项。

其中，数据模型可以在数据分析阶段创建。

其中，数据的来源支持JSON、CSV、Excel、自定义API、本地存储、URL变量、临时变量、静态数据和天机数据平台的数据模型。

其中，远程数据可以设置数据的刷新频率。

其中，数据模型模块包括数据模型创建子模块、数据模型绑定子模块和模型数据加载子模块，数据模型创建子模块用于创建数据模型，数据模型绑定子模块用于绑定数据模型到依赖数据模型的组件，模型数据加载子模块用于加载模型数据到绑定数据模型的组件。

其中，事件模块包括事件监听子模块、事件广播子模块和事件动作执行子模块，事件监听子模块用于创建事件监听，事件广播子模块用于组件广播事件，事件动作执行子模块用于组件执行监听到的事件动作。借此，实现一对一或一对多的事件交互。

在实际应用中，可以在用户点击事件后，通过弹窗的方式实现人机交互。

上述任一实施例的可视化设计器，其还支持数据大屏幕所需静态文件(包括JS、CSS和图片等)的上传。例如，可以设置资源模块，供用户利用外部的JS开发包对数据大屏幕进行扩展，借以获得扩展的功能和/或视觉效果。

上述任一实施例的可视化设计器，其还包括函数模块，供用户编写函数。例如，自定义组件函数、组件动态效果函数、事件加工函数。

其中，自定义组件函数供用户自定义组件，可以根据在线场景，实时编辑，借以弥补组件库的不足，使得可以满足所有场景。

其中，组件动态效果函数供用户编写JavaScript代码，把数据大屏幕的组件动态效果写成函数，实现数据大屏幕的动态可视化效果。

其中，事件加工函数供用户在定义完事件之后，对事件进行加工，借以触发预定动作。

上述任一实施例的可视化设计器，其还包括CSS样式模块，用于进行样式修改，该样式修改包括组件本身不支持的修改，也可以包括组件本身支持的修改。借以利用自定义的CSS样式，灵活设置数据大屏幕或者组件的呈现效果。例如，对于发布到线上之后的数据大屏幕，如果需要进行组件本身所不支持的调整，可以通过CSS样式模块进行修改，以此来影响组件本身不支持的修改，可以实现在线调整。借此，可以依照客户的需求实时修改，即便是组件自身不具备的样式修改需求，设计人员也可以根据客户临时提出的要求进行修改，且该种修改也是以所见即所得的方式进行，可以与客户进行即时的交互，不仅可以满足客户的更多需求，而且，还可以依据该种CSS样式修改来修改组件，即可以依客户需求改进组件，使其功能得以不断的扩展。

上述任一实施例的可视化设计器，其还包括模板模块，其中具有海量的数据大屏幕模板，用户可以直接复制、选用，提高数据大屏幕的制作效率。较佳的，用户可以在数据大屏幕模板的基础上依照自己的需求进行修改。

上述任一实施例的可视化设计器，其还包括渲染模块，用于对组件进行渲染，借以实现对数据大屏幕的渲染。

上述任一实施例的可视化设计器，其采用webpack+Reactjs+Redux框架实现关键业务逻辑，例如渲染等，借以减少浏览器性能消耗。

上述任一实施例的可视化设计器，其基于MVE(Model-View-Event，即模型-视图-事件)技术架构，实现高效数据联动，通过事件分发，实现数据钻取，借助松耦合架构，达到较强交互性，并支持敏捷开发。

一种可视化设计制作数据大屏幕的方法，其包括如下步骤：

S1、依据设计效果图制作效果框架；

S2、在组件库中选取组件填充到效果框架，并设置组件样式及选项；

S3、创建数据模型；

S4、绑定数据模型到组件；

S5、判断是否有高级定制及事件交互，若是，则转到步骤S6，若否，则转到步骤S7；

S6、创建函数及绑定事件；

S7、数据大屏幕制作完成。

借助上述方案，本发明的可视化设计数据大屏幕的方法，其可以实现数据大屏幕的快速制作，并且，可以实现不同组件之间的事件联动，便于展现数据分析的动态效果。

其中，组件库可以综合游戏、浏览器插件等技术元素，基于WebGL进行封装，支持开源90％以上的开源组件图形库，可以基于已有组件进行无限扩展。

步骤S3中，在数据分析阶段创建数据模型。

步骤S4中，包括绑定数据模型到依赖数据模型的组件，以及加载模型数据到绑定数据模型的组件。

步骤S5中，高级定制包括事件、样式调整、自定义组件。

其中，事件包括在各组件创建事件监听，当任意组件(一个或多个)接收到来自其他组件的事件广播，即执行事件动作，借此，实现各组件间的联动。

其中，样式调整包括组件本身不支持的调整，利用自定义的CSS样式，灵活设置数据大屏幕或者组件的呈现效果。

本发明的有益效果是：

本发明数据大屏幕的制作是通过丰富的组件库组装而成，用户不需要为制作各种各样的组件而花费大量的时间，数据大屏幕的数据模型可以很快速地定义需要呈现的所有数据，之后利用事件机制和自定义函数，实现不同组件间的事件联动，展现数据分析动态效果，完成更高级的视觉效果和事件交互。

附图说明

图1为本发明制作方法的整体流程示意图；

图2为本发明一个实施例的制作方法的流程示意图；

图3为本发明一个实施例中的webpack+Reactjs+Redux框架结构示意图；

图4为本发明一个实施例的设计界面示意图；

图5为本发明一个实施例的数据大屏幕效果示意图。

具体实施方式

为了更好的解释本发明，以便于理解，下面结合附图，通过具体实施方式，对本发明作详细描述。

参见图1，本发明一个实施例的数据大屏幕制作方法，其包括如下步骤：

S1、依据设计效果图制作效果框架；

S3、创建数据模型；

S4、绑定数据模型到组件；

S6、创建函数及绑定事件；

S7、步骤S5或S6之后，数据大屏幕制作完成，保存并发布。

借助上述方案，可以实现数据大屏幕的快速制作，并且，可以实现不同组件之间的事件联动，便于展现数据分析的动态效果。

以图5所示的创建城市运行大屏为例，首先，由美工设计大屏幕效果，给出设计图；之后，在线拖拽组件，根据设计图调整组件样式及选项；之后创建数据模型，并将组件关联到数据模型；再基于事件机制，实现组件联动。借助上述步骤，本发明基于可视化引擎，采用VME技术架构，可以在1小时左右即制作完成北京市大兴区城市运行全景分析的可视化数据大屏幕，并可以实现组件之间切换联动效果，例如拖拽时间轴改变时间，其他组件数据跟随变化，进行联动呈现。

参见图2，本发明一个实施例的数据大屏幕制作方法，其包括如下步骤：

1、首先判断有无访问权限，若无，则提示错误，若有，则转到步骤2(加载大屏配置)，若需要密码，则通过输入密码进行密码验证，若密码验证成功，则转到步骤2(加载大屏配置)；

2、加载大屏配置；

3、之后可以创建自定义函数(在需要时执行函数，还可以判断是否为自执行函数)；

4、之后创建事件监听(接收到事件广播后，执行事件动作)，借此，实现各组件间的联动；

5、再判断有无外部资源，若无外部资源，则直接转到步骤6(加载组件资源)，若有外部资源，则加载外部资源后转到步骤6(加载组件资源)，其中，加载外部资源可以是预加载或后加载的方式；

6、加载组件资源，可以是预加载或后加载的方式；

7、之后创建数据模型；

8、之后创建组件(判断是否依赖数据模型，若依赖则绑定数据模型)；

9、之后挂载组件(判断是否绑定数据模型，若是，则加载模型数据)；

10、之后渲染组件(判断选项或数据是否发生变化，若是，则升级组件)；

11、大屏幕渲染完成，可以保存发布。

借此，不仅可以实现快速大屏设计，还可以实现不同组件间的事件联动，展现数据分析动态效果。

参见图4，本发明一个实施例的可视化设计器界面示意图，该可视化设计器包括：

资源模块，供用户利用外部的JS开发包对数据大屏幕进行扩展，借以获得扩展的功能和/或视觉效果；

事件模块，基于JS事件机制，在组件间实现交互联动和消息传递；

函数模块，供用户编写函数；

CSS样式模块，用于进行样式修改。

借助上述结构的设置，本发明的，取得了如下有益效果：

其中，设计模块包括设计区子模块、组件库子模块和设置子模块。

其中，设计区子模块供用户组装制作数据大屏幕，组件库子模块供用户选取组件，设置子模块供用户设置组件的属性样式和选项。

其中，资源模块供用户利用外部的JS开发包对数据大屏幕进行扩展或者自定义组件，借此，当组件库中没有所需的组件时，现场开发，或者由第三方的资源库引入。

其中，模型模块(即数据模型模块)用于模型管理和组件绑定。

其中，事件模块用于定义事件，实现组件间、模型间的交互，以满足用户需求，例如点击图4的地理图中的某一条线，即可以看到其他效果图的相应变化。

其中，函数模块用于在定义完事件之后，通过书写的函数对事件进行加工，例如触发一些预定动作。

其中，CSS样式模块用于自定义样式，能够改变设计里的样式，即便是组件本身不具有的样式修改亦可以实现。例如，图4的地图中字体颜色，可以通过CSS样式模块调整，不会影响到其他地方，较佳的，自定义样式与自定义组件可以共用。

参见图3，本发明基于MVE(Model-View-Event)技术架构，实现不同组件间的事件联动，展现数据分析动态效果，实现高效数据联动，通过事件分发，实现数据钻取，采用webpack+Reactjs+Redux框架实现渲染、加密等关键业务逻辑。

具体的，后端设置控制器1及与之连接的视图1和模型1(三者可集合为一个块)，与视图1连接的模型2、虚拟DOM1和视图2(三者依次连接并可集合为一个块)，与控制器1连接的路由器1和JS RUNTIME(而者可集合为一个块)，与模型1连接的路由器2、控制器2、模型3和视图3(四者可集合为一个块，路由器2、模型3和视图3与控制器2分别连接)；前端设置浏览器及与之连接的DOM和JS(三者可集合为一个块)，浏览器与JS RUNTIME和视图2分别连接，与DOM连接的视图4、虚拟DOM2和模型4(三者依次连接并可集合为一个块)，与JS连接的路由器3、控制器3、试图5和模型5(四者可集合为一个块，路由器3、模型5和视图5与控制器3分别连接)，视图5还与模型4连接，前后端还借助JSON API交互。

借此松耦合架构，前后端分离，且前后端分别可以借助虚拟DOM进行渲染，可以减少浏览器性能消耗，前后端还借助JSON API进行交互，可以达到交互性强，支持敏捷开发的效果，提高了效率，能实现一个小时创建可视化大屏。

Claims

1.一种基于ReactJS的可视化设计器，其特征在于，其包括：

组件库，其中具有若干预定组件；

2.如权利要求1所述的基于ReactJS的可视化设计器，其特征在于：设计模块是通过拖拽的方式从组件库中选择需要的组件。

3.如权利要求1所述的基于ReactJS的可视化设计器，其特征在于：数据模型模块包括数据模型创建子模块、数据模型绑定子模块和模型数据加载子模块，数据模型创建子模块用于创建数据模型，数据模型绑定子模块用于绑定数据模型到依赖数据模型的组件，模型数据加载子模块用于加载模型数据到绑定数据模型的组件。

4.如权利要求1所述的基于ReactJS的可视化设计器，其特征在于：事件模块包括事件监听子模块、事件广播子模块和事件动作执行子模块，事件监听子模块用于创建事件监听，事件广播子模块用于组件广播事件，事件动作执行子模块用于组件执行监听到的事件动作。

5.如权利要求1所述的基于ReactJS的可视化设计器，其特征在于：还包括CSS样式模块，用于进行样式修改，该样式修改包括组件本身不支持的修改，也可以包括组件本身支持的修改。

6.如权利要求1所述的基于ReactJS的可视化设计器，其特征在于，还包括下列方案中的任一项或任几项：

方案1、组件库包括封装highcharts、echarts、d3js、threejs、webgl的组件；

方案2、组件库的组件包括综合游戏、浏览器插件，基于WebGL进行封装的开源组件图形；

方案3、组件库包括开放式的组件市场，用户可以在线制作并发布自定义组件，分享到组件市场，同时也可以从组件市场中挑选组件应用到数据大屏幕中；

方案4、设计模块包括设置子模块，用于设置大屏的颜色、背景、标题和/或尺寸；

方案5、设计模块包括设置设计区子模块，用于组装制作数据大屏幕；

方案6、其还支持数据大屏幕所需静态文件的上传；

方案7、还设置有资源模块，供用户利用外部的JS开发包对数据大屏幕进行扩展；

方案8、还包括自定义组件模块，供用户自定义组件，可以根据在线场景，实时编辑；

方案9、还包括组件动态效果模块，供用户编写JavaScript代码，把数据大屏幕的组件动态效果写成函数，实现数据大屏幕的动态可视化效果；

方案10、还包括事件加工模块，供用户在定义完事件之后，对事件进行加工；

方案11、还包括模板模块，其中具有海量的数据大屏幕模板，供用户直接复制、选用；

方案12、还包括渲染模块，用于对组件进行渲染；

方案13、其采用webpack+Reactjs+Redux框架实现关键业务逻辑；

方案14、基于MVE技术架构，实现高效数据联动，通过事件分发，实现数据钻取。

7.一种数据大屏幕制作方法，其特征在于，其包括如下步骤：

S1、制作效果框架；

S3、创建数据模型；

S4、绑定数据模型到组件；

S6、创建函数及绑定事件；

S7、步骤S5或S6之后，数据大屏幕制作完成。

8.如权利要求7所述的方法，其特征在于：

步骤S3中，在数据分析阶段创建数据模型；

步骤S4中，包括绑定数据模型到依赖数据模型的组件，以及加载模型数据到绑定数据模型的组件；和/或

步骤S5中，高级定制包括事件、样式调整、自定义组件。较佳的，事件包括在各组件创建事件监听，当任意组件(一个或多个)接收到来自其他组件的事件广播，即执行事件动作。较佳的，样式调整包括组件本身不支持的调整，利用自定义的CSS样式，灵活设置数据大屏幕或者组件的呈现效果。

9.一种数据大屏幕制作方法，其特征在于，其包括如下步骤：

2、加载大屏配置；

3、之后可以创建自定义函数；

4、之后创建事件监听；

5、再判断有无外部资源，若无外部资源，则直接转到步骤6，若有外部资源，则加载外部资源后转到步骤6；

6、加载组件资源；

7、之后创建数据模型；

8、之后创建组件；

9、之后挂载组件；

10、之后渲染组件；

11、大屏幕渲染完成。

10.如权利要求9所述的方法，其特征在于：

还包括步骤1、首先判断有无访问权限，若无，则提示错误，若有，则转到步骤2，若需要密码，则通过输入密码进行密码验证，若密码验证成功，则转到步骤2；

步骤3中，还包括判断是否为自执行函数；

步骤4中，各组件或数据模型接收到事件广播后，执行事件动作；

步骤5中，可以预加载或后加载外部资源；

步骤6中，可以预加载或后加载组件资源；

步骤8中，还判断是否依赖数据模型，若依赖则绑定数据模型；

步骤9中，还判断是否绑定数据模型，若是，则加载模型数据；和/或

步骤10中，还判断选项或数据是否发生变化，若是，则升级组件。