[發(fā)明專利]一種基于vue的圖表配置方法、裝置、設(shè)備和介質(zhì)

在審

• 申請?zhí)枺?/td>: 202010650518.5
• 申請日: 2020-07-08
• 公開（公告）號: CN111984177A
• 公開（公告）日: 2020-11-24
• 發(fā)明（設(shè)計）人: 黃家昌;陳雪梅;楊輝;邱道椿
• 申請（專利權(quán)）人: 福建億能達(dá)信息技術(shù)股份有限公司
• 主分類號: G06F3/0486
• 分類號: G06F3/0486;G06F9/445;G06F9/451;G06F40/109;G06F40/18
• 代理公司: 福州市鼓樓區(qū)京華專利事務(wù)所(普通合伙) 35212
• 代理人: 林云嬌

1.一種基于vue的圖表配置方法，其特征在于：包括下述步驟：

S1、提供圖表控件，在圖表控件被選擇時響應(yīng)一圖表類型選擇框；當(dāng)圖表類型選擇框被選中時，圖表配置區(qū)顯示相應(yīng)的配置項以供配置，所述配置項包括以切換開關(guān)、選擇框或輸入框為配置方式的基礎(chǔ)配置項；所述基礎(chǔ)配置項的內(nèi)容預(yù)先在內(nèi)部已經(jīng)定義好，并通過vue的v-model雙向綁定功能，且能根據(jù)配置內(nèi)容在圖表展示區(qū)實(shí)時顯示配置效果；

S2、提供三種數(shù)據(jù)源獲取方式供選擇：

第一種，通過本地數(shù)據(jù)集sql編寫腳本形成的腳本列表來選擇已經(jīng)編寫好的展示數(shù)據(jù)；

第二種，通過訪問數(shù)據(jù)接口地址直接獲取展示數(shù)據(jù)；

第三種，通過代碼塊訪問獲取展示數(shù)據(jù)；

S3、根據(jù)圖表配置區(qū)的配置項的配置內(nèi)容，渲染獲取到的展示數(shù)據(jù)，在所述圖表展示區(qū)進(jìn)行圖表展示。

2.根據(jù)權(quán)利要求1所述的一種基于vue的圖表配置方法，其特征在于：

所述步驟S1中，所述圖表控件為拖拽控件，設(shè)于拖拽區(qū)，選擇方式為拖拽；

所述步驟S2中，通過所述第三種數(shù)據(jù)源獲取方式時能兼容已經(jīng)編寫好的展示數(shù)據(jù)，通過監(jiān)聽定時器來控制多久請求一次展示數(shù)據(jù)；

所述步驟S2中，當(dāng)獲取到展示數(shù)據(jù)時，數(shù)據(jù)整理成如下兩種格式：

(1)、針對都只有一個指標(biāo)且只一個維度的情況，將維度值存在name屬性中，將指標(biāo)值存在value屬性中，使內(nèi)容隨著標(biāo)維度值的變換而變換；

(2)、針對其它情況，將維度值存在name屬性上動態(tài)展示，在查詢成功后通過相應(yīng)的api接口函數(shù)獲取查詢返回的值以及獲取當(dāng)前圖表控件所有屬性，找到指標(biāo)存放的地方，并根據(jù)實(shí)際業(yè)務(wù)需求動態(tài)調(diào)整顯示的指標(biāo)；或者是將指標(biāo)值存在name屬性上動態(tài)展示，在查詢成功后通過相應(yīng)的api接口函數(shù)獲取查詢返回的值以及獲取當(dāng)前圖表控件所有屬性，找到維度存放的地方，并根據(jù)實(shí)際業(yè)務(wù)需求動態(tài)調(diào)整顯示的維度。

3.根據(jù)權(quán)利要求1所述的一種基于vue的圖表配置方法，其特征在于：

所述配置項還包括自定義配置項，自定義配置項繼承了ECharts圖表屬性，能配置當(dāng)前圖表的所有信息，且配置實(shí)時生效；

所述基礎(chǔ)配置項具體包含：

標(biāo)題、數(shù)據(jù)、提示框、圖例、橫軸和縱軸的配置項；

圖例、標(biāo)題、顯示/隱藏，顯示的情況下提供圖例字體大小、顏色、定位和格式化的配置項；以及

橫軸/縱軸：軸數(shù)據(jù)顯示/隱藏、軸數(shù)據(jù)、軸刻度的格式化、分隔線顯示/隱藏、軸名稱、軸刻度標(biāo)簽大小、軸刻度標(biāo)簽旋轉(zhuǎn)角度、軸/刻度標(biāo)簽顏色的配置項。

4.根據(jù)權(quán)利要求3所述的一種基于vue的圖表配置方法，其特征在于：還包括：

步驟S4、所述圖表配置區(qū)還顯示聯(lián)動配置項，供配置傳遞參數(shù)的控件別名和取值字段，用以將副圖表通過所述傳遞參數(shù)綁定于主圖表上，實(shí)時監(jiān)聽主圖表的傳遞參數(shù)，一旦主圖表的傳遞參數(shù)的取值字段內(nèi)容發(fā)生變化，就觸發(fā)聯(lián)動查詢，將該變化更新渲染至副圖表。

5.一種基于vue的圖表配置裝置，其特征在于：包括：

圖表控件，在被選擇時響應(yīng)一圖表類型選擇框；當(dāng)圖表類型選擇框被選中時，于圖表配置區(qū)顯示相應(yīng)的配置項以供配置，所述配置項包括以切換開關(guān)、選擇框或輸入框為配置方式的基礎(chǔ)配置項；所述基礎(chǔ)配置項的內(nèi)容預(yù)先在內(nèi)部已經(jīng)定義好，并通過vue的v-model雙向綁定功能，且能根據(jù)配置內(nèi)容在圖表展示區(qū)實(shí)時顯示配置效果；

數(shù)據(jù)源獲取模塊，用于提供三種數(shù)據(jù)源獲取方式供選擇：

第一種，通過本地數(shù)據(jù)集sql編寫腳本形成的腳本列表來選擇已經(jīng)編寫好的展示數(shù)據(jù)；

第二種，通過訪問數(shù)據(jù)接口地址直接獲取展示數(shù)據(jù)；

第三種，通過代碼塊訪問獲取展示數(shù)據(jù)；

渲染展示模塊，用于根據(jù)圖表配置區(qū)的配置項的配置內(nèi)容，渲染獲取到的展示數(shù)據(jù)，在所述圖表展示區(qū)進(jìn)行圖表展示。