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

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

【技术实现步骤摘要】
基于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、数据大屏幕制作完成。借助上述方案，本专利技术的可视化设计数据大屏幕的方法，其可以实现数据大屏幕的快速制作，并且，可以实现不同组件之间的事件联动，便于展现数据分析的动态效果。其中，可以基于已有可视化引擎，封装highcharts、echarts、d3js、threejs、webgl(3D)组件库，实现数据的可视化展示效果。其中，组件库可以综合游戏、浏览器插件等技术元素，基于WebGL进行封装，支持开源90％以上的开源组件图形库，可以基于已有组件进行无限扩展。其中，组件库可以是开放式的组件市场，用户可以在线制作并发布自定义组件，分享到组件市场，同时也可以从组件市场中挑选组件应用到数据大屏幕中。步骤S3中，在数据分析阶段创建数据模型。步骤S4中，包括绑定数据模型到依赖数据模型的组件，以及加载模型数据到绑定数据模型的组件。步骤S5中，高级定制包括事件、样式调整、自定义组件。其中，事件包括在各组件创建事件监听，当任意组件(一个或多个)接收到来自其他组件的事件广播，即执行事件动作，借此，实现各组件间的联动。其中，样式调整包括组件本身不支持的调整，利用自定义的CSS样式，灵活设置数据大屏幕或者组件的呈现效果。本专利技术的有益效果是：本专利技术数据大屏幕的制作是通过丰富的组件库组装而成，用户不需要为制作各种各样的组件而花费大量的时间，数据大屏幕的数据模型可以很快速地定义需要呈现的所有数据，之后利本文档来自技高网...

【技术保护点】
一种基于ReactJS的可视化设计器，其特征在于，其包括：组件库，其中具有若干预定组件；设计模块，供用户利用从组件库中选择的组件实现所见即所得的数据大屏幕制作；数据模型模块，供用户创建数据模型，定义数据大屏幕中所用到的数据，并绑定数据模型到组件；事件模块，基于JS事件机制，在组件间和/或数据模型间实现交互联动和消息传递。

【技术特征摘要】
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代码，把数据大屏幕的组件动态效果写成函数，实现数据...

【专利技术属性】
技术研发人员：殷晋，
申请(专利权)人：北京天机数测数据科技有限公司，
类型：发明
国别省市：北京,11