[發(fā)明專利]基于ReactJS的可視化設(shè)計(jì)器及數(shù)據(jù)大屏制作方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201710511417.8
• 申請(qǐng)日: 2017-06-27
• 公開（公告）號(hào): CN107330053A
• 公開（公告）日: 2017-11-07
• 發(fā)明（設(shè)計(jì)）人: 殷晉
• 申請(qǐng)（專利權(quán)）人: 北京天機(jī)數(shù)測(cè)數(shù)據(jù)科技有限公司
• 主分類號(hào): G06F17/30
• 分類號(hào): G06F17/30;G06F9/44
• 代理公司: 暫無(wú)信息
• 代理人: 暫無(wú)信息

1.一種基于ReactJS的可視化設(shè)計(jì)器，其特征在于，其包括：

組件庫(kù)，其中具有若干預(yù)定組件；

設(shè)計(jì)模塊，供用戶利用從組件庫(kù)中選擇的組件實(shí)現(xiàn)所見即所得的數(shù)據(jù)大屏幕制作；

數(shù)據(jù)模型模塊，供用戶創(chuàng)建數(shù)據(jù)模型，定義數(shù)據(jù)大屏幕中所用到的數(shù)據(jù)，并綁定數(shù)據(jù)模型到組件；

事件模塊，基于JS事件機(jī)制，在組件間和/或數(shù)據(jù)模型間實(shí)現(xiàn)交互聯(lián)動(dòng)和消息傳遞。

2.如權(quán)利要求1所述的基于ReactJS的可視化設(shè)計(jì)器，其特征在于：設(shè)計(jì)模塊是通過(guò)拖拽的方式從組件庫(kù)中選擇需要的組件。

3.如權(quán)利要求1所述的基于ReactJS的可視化設(shè)計(jì)器，其特征在于：數(shù)據(jù)模型模塊包括數(shù)據(jù)模型創(chuàng)建子模塊、數(shù)據(jù)模型綁定子模塊和模型數(shù)據(jù)加載子模塊，數(shù)據(jù)模型創(chuàng)建子模塊用于創(chuàng)建數(shù)據(jù)模型，數(shù)據(jù)模型綁定子模塊用于綁定數(shù)據(jù)模型到依賴數(shù)據(jù)模型的組件，模型數(shù)據(jù)加載子模塊用于加載模型數(shù)據(jù)到綁定數(shù)據(jù)模型的組件。

4.如權(quán)利要求1所述的基于ReactJS的可視化設(shè)計(jì)器，其特征在于：事件模塊包括事件監(jiān)聽子模塊、事件廣播子模塊和事件動(dòng)作執(zhí)行子模塊，事件監(jiān)聽子模塊用于創(chuàng)建事件監(jiān)聽，事件廣播子模塊用于組件廣播事件，事件動(dòng)作執(zhí)行子模塊用于組件執(zhí)行監(jiān)聽到的事件動(dòng)作。

5.如權(quán)利要求1所述的基于ReactJS的可視化設(shè)計(jì)器，其特征在于：還包括CSS樣式模塊，用于進(jìn)行樣式修改，該樣式修改包括組件本身不支持的修改，也可以包括組件本身支持的修改。

6.如權(quán)利要求1所述的基于ReactJS的可視化設(shè)計(jì)器，其特征在于，還包括下列方案中的任一項(xiàng)或任幾項(xiàng)：

方案1、組件庫(kù)包括封裝highcharts、echarts、d3js、threejs、webgl的組件；

方案2、組件庫(kù)的組件包括綜合游戲、瀏覽器插件，基于WebGL進(jìn)行封裝的開源組件圖形；

方案3、組件庫(kù)包括開放式的組件市場(chǎng)，用戶可以在線制作并發(fā)布自定義組件，分享到組件市場(chǎng)，同時(shí)也可以從組件市場(chǎng)中挑選組件應(yīng)用到數(shù)據(jù)大屏幕中；

方案4、設(shè)計(jì)模塊包括設(shè)置子模塊，用于設(shè)置大屏的顏色、背景、標(biāo)題和/或尺寸；

方案5、設(shè)計(jì)模塊包括設(shè)置設(shè)計(jì)區(qū)子模塊，用于組裝制作數(shù)據(jù)大屏幕；

方案6、其還支持?jǐn)?shù)據(jù)大屏幕所需靜態(tài)文件的上傳；

方案7、還設(shè)置有資源模塊，供用戶利用外部的JS開發(fā)包對(duì)數(shù)據(jù)大屏幕進(jìn)行擴(kuò)展；

方案8、還包括自定義組件模塊，供用戶自定義組件，可以根據(jù)在線場(chǎng)景，實(shí)時(shí)編輯；

方案9、還包括組件動(dòng)態(tài)效果模塊，供用戶編寫JavaScript代碼，把數(shù)據(jù)大屏幕的組件動(dòng)態(tài)效果寫成函數(shù)，實(shí)現(xiàn)數(shù)據(jù)大屏幕的動(dòng)態(tài)可視化效果；

方案10、還包括事件加工模塊，供用戶在定義完事件之后，對(duì)事件進(jìn)行加工；

方案11、還包括模板模塊，其中具有海量的數(shù)據(jù)大屏幕模板，供用戶直接復(fù)制、選用；

方案12、還包括渲染模塊，用于對(duì)組件進(jìn)行渲染；

方案13、其采用webpack+Reactjs+Redux框架實(shí)現(xiàn)關(guān)鍵業(yè)務(wù)邏輯；

方案14、基于MVE技術(shù)架構(gòu)，實(shí)現(xiàn)高效數(shù)據(jù)聯(lián)動(dòng)，通過(guò)事件分發(fā)，實(shí)現(xiàn)數(shù)據(jù)鉆取。

7.一種數(shù)據(jù)大屏幕制作方法，其特征在于，其包括如下步驟：

S1、制作效果框架；

S2、在組件庫(kù)中選取組件填充到效果框架，并設(shè)置組件樣式及選項(xiàng)；

S3、創(chuàng)建數(shù)據(jù)模型；

S4、綁定數(shù)據(jù)模型到組件；

S5、判斷是否有高級(jí)定制及事件交互，若是，則轉(zhuǎn)到步驟S6，若否，則轉(zhuǎn)到步驟S7；

S6、創(chuàng)建函數(shù)及綁定事件；

S7、步驟S5或S6之后，數(shù)據(jù)大屏幕制作完成。

8.如權(quán)利要求7所述的方法，其特征在于：

步驟S3中，在數(shù)據(jù)分析階段創(chuàng)建數(shù)據(jù)模型；

步驟S4中，包括綁定數(shù)據(jù)模型到依賴數(shù)據(jù)模型的組件，以及加載模型數(shù)據(jù)到綁定數(shù)據(jù)模型的組件；和/或

步驟S5中，高級(jí)定制包括事件、樣式調(diào)整、自定義組件。較佳的，事件包括在各組件創(chuàng)建事件監(jiān)聽，當(dāng)任意組件(一個(gè)或多個(gè))接收到來(lái)自其他組件的事件廣播，即執(zhí)行事件動(dòng)作。較佳的，樣式調(diào)整包括組件本身不支持的調(diào)整，利用自定義的CSS樣式，靈活設(shè)置數(shù)據(jù)大屏幕或者組件的呈現(xiàn)效果。