[发明专利]基于ReactJS的可视化设计器及数据大屏制作方法

权利要求书

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

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

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

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

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

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、制作效果框架；

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

S3、创建数据模型；

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

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

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

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

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

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

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

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