在電影《摩天營(yíng)救》中，監(jiān)控中心的全方位展示屏幕給人印象深刻。現(xiàn)在這種立體化大屏幕似乎成了好萊塢大片的標(biāo)配。其實(shí)，這種逼格很高的鏡頭就是一個(gè)數(shù)據(jù)可視化大屏。隨著社會(huì)信息化的高速增長(zhǎng)，數(shù)據(jù)可視化大屏已經(jīng)在很多商業(yè)領(lǐng)域彰顯價(jià)值。比如會(huì)議展廳、園區(qū)管理、城市交通調(diào)度中心、公安指揮中心、企業(yè)生產(chǎn)監(jiān)控等重要場(chǎng)所。相對(duì)于傳統(tǒng)的可視化工具開(kāi)發(fā)出來(lái)的圖表和數(shù)據(jù)儀表盤(pán)，如今的可視化大屏，搭載地理軌跡、飛線、熱力、區(qū)塊、3D地圖/地球，多圖層疊加等技術(shù)，能生動(dòng)友好地“活化”數(shù)據(jù)；同時(shí)也能結(jié)合豐富的交互功能和實(shí)時(shí)性，讓數(shù)據(jù)“開(kāi)口說(shuō)話”，傳達(dá)出超出其本身的信息。利用Data MAX 軟件制作的可視化大屏今天DataHunter數(shù)獵哥就來(lái)說(shuō)說(shuō)如何運(yùn)用可視化大屏工具，配置出一頁(yè)炫酷的可視化大屏。(本文配圖主要借助 DataHuner 自主研發(fā)的 Data MAX 數(shù)據(jù)可視化大屏軟件制作)一、創(chuàng)建大屏Data MAX 是DataHuner自主研發(fā)的、基于瀏覽器的、一款用于配置數(shù)據(jù)可視化大屏的工具平臺(tái)。它提供了豐富的可視化設(shè)計(jì)組件，通過(guò)簡(jiǎn)單的點(diǎn)擊、拖拽等操作，即可進(jìn)行圖表布局的調(diào)整，只要幾分鐘就可以配置出一頁(yè)炫酷的可視化大屏。1.主題模板首先登錄后臺(tái)，點(diǎn)擊“新建大屏”，這里可以看到多種主題模板，例如：“企業(yè)季度銷售數(shù)據(jù)”、“融媒體傳播力分析”、“消費(fèi)品門(mén)店銷售監(jiān)控”…等等。這些主題模板都自帶整體場(chǎng)景、圖表資源、配色樣式、位置布局、Demo數(shù)據(jù)、動(dòng)效屬性等，可支持企業(yè)的指揮中心、業(yè)務(wù)看板、匯報(bào)演示等各種業(yè)務(wù)場(chǎng)景。只需調(diào)用預(yù)置的模板進(jìn)行更改，最后將各組件在配置中接入數(shù)據(jù)即可生成可視化大屏。2.空白模板除了主題模板以外，還可以創(chuàng)建空白模板，以便自由定制風(fēng)格和樣式。點(diǎn)擊右上角的“創(chuàng)建大屏”，即可進(jìn)入。頁(yè)面分為兩個(gè)部分，左邊提供了各種可視化設(shè)計(jì)組件，其中包含基礎(chǔ)組件、地圖組件、高級(jí)組件、文字內(nèi)容和輔助圖形；右邊則是可視化大屏。點(diǎn)擊左上角的“基本組件”，選擇所需的各種組件，比如柱狀圖、雙軸圖…對(duì)這些組件進(jìn)行點(diǎn)擊、拖拽、放大縮小等操作，然后按照自己的想法就可以配置出一頁(yè)炫酷的可視化大屏。除此以外，Data MAX 還支持用戶批量管理這些組件，比如組件組合、組件多選等操作，用鼠標(biāo)左鍵框選，可以選中多個(gè)組件，并可以將多個(gè)組件從一個(gè)位置統(tǒng)一拖動(dòng)到另外一個(gè)位置。另外還支持用戶對(duì)多個(gè)組件進(jìn)行組合，我們鼠標(biāo)框選，或者通過(guò)“Ctrl+鼠標(biāo)點(diǎn)擊”，選中多個(gè)組件，點(diǎn)擊右鍵即可彈出功能菜單，進(jìn)行組件組合。關(guān)于可視化大屏的頁(yè)面布局，這里需要注意的是：可以采取主次分布版式，也就是核心業(yè)務(wù)指標(biāo)放中心，次要業(yè)務(wù)和輔助業(yè)務(wù)指標(biāo)放兩邊；也可以采取平均分布，還可以兩者相結(jié)合進(jìn)行適當(dāng)調(diào)整。3.預(yù)覽與保存最后點(diǎn)擊右上角的“預(yù)覽”，即可彈出一個(gè)頁(yè)面，這時(shí)在這個(gè)網(wǎng)頁(yè)上就可以對(duì)剛才配置的看板進(jìn)行預(yù)覽了，關(guān)閉網(wǎng)頁(yè)即可退出。最后我們點(diǎn)擊左上角的“箭頭”退出，系統(tǒng)即默認(rèn)進(jìn)行了保存。二、組件屬性配置前面分享了Data MAX 大屏創(chuàng)建，接下來(lái)介紹如何對(duì)各種組件進(jìn)行屬性配置。以“基本組件”為例，拖入一個(gè)基本組件：比如“雙軸圖”，點(diǎn)擊這個(gè)組件的復(fù)選框，在右邊即可看到組件屬性配置的各項(xiàng)參數(shù)。1.復(fù)選框參數(shù)最上面的參數(shù)設(shè)置是復(fù)選框的設(shè)置，寬和高分別代表框的數(shù)值大小，左和上代表在大屏中的坐標(biāo)位置。下面是名稱和風(fēng)格，系統(tǒng)暫時(shí)默認(rèn)是星空風(fēng)格。2.全局樣式也就是其中雙軸圖的各種參數(shù)，比如字體樣式，“邊距”則是雙軸圖在復(fù)選框內(nèi)的位置坐標(biāo)。最后是“柱子樣式”，比如是否堆積，寬度占比、柱體間隙、柱體的棱角圓角值，還有背景色等。3.數(shù)據(jù)樣式這里指其中圖表內(nèi)每個(gè)項(xiàng)目柱體的形狀與顏色，比如框內(nèi)填充色、邊框色還有邊框粗細(xì)等參數(shù)的調(diào)整；由于是雙軸圖，所以除了柱狀圖的各種參數(shù)設(shè)置，還有折線圖的參數(shù)設(shè)置，比如折線顏色、粗細(xì)、陰影大小和顏色、是否平滑、是否顯示各種數(shù)據(jù)點(diǎn)、點(diǎn)的直徑、顏色等各種參數(shù)的數(shù)值等。4.柱體數(shù)值這里主要指的是圖表中各數(shù)據(jù)值是否顯示、文本樣式、還有格式等參數(shù)設(shè)置，比如數(shù)值格式里又可勾選“縮寫(xiě)方式”、“顯示格式”、“小數(shù)點(diǎn)位數(shù)”等等，主要方便更容易識(shí)別圖表的具體數(shù)據(jù)。下面的折線數(shù)值也是一樣。5.坐標(biāo)軸坐標(biāo)軸的參數(shù)設(shè)置主要有“是否顯示”坐標(biāo)軸、文本樣式、坐標(biāo)軸和文字間距、軸線參數(shù)、還有網(wǎng)格線、刻度線等這種細(xì)節(jié)參數(shù)的設(shè)置。這里需要注意的是還有一個(gè)參數(shù)設(shè)置如“縮略軸”，當(dāng)數(shù)據(jù)較多時(shí)，或者數(shù)據(jù)隨時(shí)間變化時(shí)，而我們只想看到最近3天或者一周的數(shù)據(jù)時(shí)，可以勾選“縮略軸”顯示，然后設(shè)置起始的位置和長(zhǎng)度，即可顯示想要呈現(xiàn)的數(shù)據(jù)。Y軸與X軸一樣。6.圖例任何數(shù)據(jù)圖表都需要有圖例，因?yàn)闆](méi)有圖例，看可視化圖表的人就可能不能直觀的了解到數(shù)據(jù)圖表所呈現(xiàn)的意義，這里我們勾選顯示，下面的參數(shù)還可以對(duì)圖例進(jìn)行位置、間距還有文本樣式的設(shè)置。7.hover層hover這里是選擇器的意思，也就是當(dāng)鼠標(biāo)放在雙軸圖的柱子上時(shí)，可以彈出這個(gè)維度項(xiàng)具體的數(shù)據(jù)，可以選擇觸發(fā)動(dòng)作為“鼠標(biāo)懸浮”或者“點(diǎn)擊”，另外下面的“文本樣式”、“邊距”、“背景框樣式”都是對(duì)彈出的文本樣式進(jìn)行各種參數(shù)的設(shè)定。8.是否開(kāi)啟動(dòng)畫(huà)指的是當(dāng)打開(kāi)可視化大屏?xí)r，各種圖表組件里呈現(xiàn)動(dòng)畫(huà)效果，比如當(dāng)我們拖入“雙軸圖”，可以看到里面的柱子從X軸，有像噴泉一樣動(dòng)畫(huà)效果呈現(xiàn)出來(lái)。每個(gè)圖表都有自帶的動(dòng)畫(huà)效果，一般系統(tǒng)默認(rèn)是開(kāi)啟動(dòng)畫(huà)的。9.數(shù)據(jù)類型這個(gè)部分是組件屬性配置最重要的，Data MAX 的組件數(shù)據(jù)接入現(xiàn)在有兩種方式：靜態(tài)json數(shù)據(jù)和API接口。下面的“數(shù)據(jù)配置說(shuō)明”和“數(shù)據(jù)配置”都是與“數(shù)據(jù)類型”相結(jié)合，這三塊的具體參數(shù)配置，將會(huì)在下文中單獨(dú)進(jìn)行詳細(xì)介紹。10.組件交互當(dāng)在做匯報(bào)演示，或者查看業(yè)務(wù)數(shù)據(jù)時(shí)，需要將將可視化大屏內(nèi)的各種組件、或者不同的可視化大屏之間做數(shù)據(jù)的聯(lián)動(dòng)過(guò)濾篩選、鉆取，以便了解業(yè)務(wù)細(xì)節(jié)，這時(shí)我們可以設(shè)計(jì)組件交互效果。交互方式有5種：分別是無(wú)、彈窗、跳轉(zhuǎn)或者放大。總的來(lái)說(shuō)，各種組件的參數(shù)配置大體相似，比如柱狀圖、折線圖、餅狀圖，還有雷達(dá)圖。當(dāng)然還有額外的一些組件還有其他的參數(shù)設(shè)置，比如：(1)基礎(chǔ)組件中“儀表盤(pán)”的參數(shù)配置中有“預(yù)警”功能，當(dāng)數(shù)值達(dá)到多少時(shí)，儀表盤(pán)可以通過(guò)顏色的變化來(lái)呈現(xiàn)預(yù)警的可視化效果；(2)地圖組件中“2D地圖”的參數(shù)配置中會(huì)有“氣泡”“卡片”“飛線”“區(qū)域充填”等各種參數(shù)的調(diào)整；(3)高級(jí)組件中“TAB”參數(shù)配置中，我們點(diǎn)擊“Tab列表”，可對(duì)其中輪播的圖表進(jìn)行配置，這里我們直接將配置好的圖表鏈接復(fù)制到地址選項(xiàng)，修改名稱即可，最后還可以設(shè)置輪播的時(shí)長(zhǎng)間隔等參數(shù)。總體來(lái)說(shuō)，依據(jù)自己的需求進(jìn)行配置即可。三、組件數(shù)據(jù)接入在前面介紹組件的屬性配置時(shí)，我們遺留了關(guān)于組件如何接入數(shù)據(jù)的問(wèn)題，Data MAX 提供了多種數(shù)據(jù)對(duì)接模式，包括靜態(tài)json數(shù)據(jù)和API接口。靜態(tài)數(shù)據(jù)是通過(guò)線下實(shí)時(shí)編輯的方式進(jìn)行數(shù)據(jù)調(diào)整，進(jìn)而調(diào)整整體展示效果，而API則是實(shí)時(shí)對(duì)接數(shù)據(jù)庫(kù)。1.靜態(tài)json數(shù)據(jù)在基礎(chǔ)組件里選擇“彩色柱圖”，然后在“數(shù)據(jù)類型”中勾選“靜態(tài)數(shù)據(jù)”，系統(tǒng)暫時(shí)是默認(rèn)了一部分靜態(tài)數(shù)據(jù)，將其刪除，然后添加自己的靜態(tài)數(shù)據(jù)。這里直接打開(kāi)提前用Excel數(shù)據(jù)轉(zhuǎn)化好的靜態(tài)數(shù)據(jù)代碼，然后復(fù)制到數(shù)據(jù)類型的配置框中，往下滑動(dòng)頁(yè)面，點(diǎn)擊執(zhí)行即可看到組件的數(shù)據(jù)已按照我們接入的靜態(tài)數(shù)據(jù)進(jìn)行了更新。這里很多人會(huì)說(shuō)我不懂代碼，該如何接入靜態(tài)數(shù)據(jù)呢？當(dāng)然也是有辦法的，如果你身邊的同事如果有懂代碼的，你可以直接咨詢他們；如果沒(méi)有，網(wǎng)上也有很多第三方工具可以直接將Excel數(shù)據(jù)轉(zhuǎn)換成靜態(tài)數(shù)據(jù)，直接百度就可以了。如果導(dǎo)入的靜態(tài)數(shù)據(jù)沒(méi)有顯示出現(xiàn)，這里需要注意“數(shù)據(jù)配置說(shuō)明”和“數(shù)據(jù)配置”這兩塊的內(nèi)容，主要是其中的維度項(xiàng)和值是否在你的靜態(tài)數(shù)據(jù)代碼中與圖表類型相對(duì)應(yīng)。打個(gè)比方，柱狀圖所要求的是一個(gè)維度對(duì)應(yīng)一個(gè)值，而散點(diǎn)或氣泡圖對(duì)兩個(gè)維度對(duì)應(yīng)一個(gè)值或者兩個(gè)值，另外是雷達(dá)圖則是多個(gè)維度對(duì)應(yīng)多個(gè)值，這些都需要與靜態(tài)數(shù)據(jù)代碼一一對(duì)應(yīng)。詳細(xì)內(nèi)容可以參考我們之前發(fā)過(guò)的文章《活用這23種圖表，讓你的數(shù)據(jù)分析勝人一籌》。除此以外，還需要注意靜態(tài)數(shù)據(jù)默認(rèn)“數(shù)值”格式，如果是百分比，則需要修改為帶小數(shù)點(diǎn)的數(shù)值才能顯示。2.API接口Data MAX 還可實(shí)時(shí)通過(guò)API對(duì)接數(shù)據(jù)庫(kù)，API支持對(duì)接的數(shù)據(jù)庫(kù)具體包括：My SQL 、Oracle 、GreenPlum 、Postagre SQL 、SQL Server 、Hive、Kylin、Sybase、Vertica等。在“數(shù)據(jù)類型”里勾選“API”選項(xiàng)，在“受控組件”里選擇彩色柱圖的組件。然后選擇請(qǐng)求方式這里有g(shù)et、post兩種方式，這里可以選擇post，然后設(shè)置是否定時(shí)更新，時(shí)間間隔是多久，最后我們輸入API地址。這里需要注意的是你的API地址首先需要找我們官網(wǎng)人員在后臺(tái)進(jìn)行創(chuàng)建和開(kāi)通，開(kāi)通以后，才可以進(jìn)行API數(shù)據(jù)的接入，這里我們提前準(zhǔn)備好了一個(gè)API地址，然后復(fù)制進(jìn)去，點(diǎn)擊下方的執(zhí)行即可顯示。四、小結(jié)在這里，我們已經(jīng)跟大家分享了關(guān)于“大屏創(chuàng)建”、“組件屬性配置”、“組件數(shù)據(jù)配置”，另外還有額外的功能，比如“大屏設(shè)置”中的縮放方式，可以針對(duì)大屏投放到不同終端時(shí)，可依據(jù)屏幕分辨率進(jìn)行適配，比如“鏈接分享”，可直接將可視化大屏進(jìn)行分享等。利用Data MAX 軟件制作的可視化大屏整體來(lái)說(shuō)關(guān)于Data MAX 可視化大屏如何配置，已經(jīng)基本介紹差不多了。Data MAX 操作起來(lái)非常簡(jiǎn)單，只要上手試一試，就能配出屬于自己的炫酷可視化大屏。你可以添加小助手微信Kelly-HR，了解你最想使用的功能。本文中所有圖表都是軟件免費(fèi)版做出來(lái)的。想嘗試自己做圖，點(diǎn)擊“閱讀原文”即可學(xué)習(xí)如何制作，記得先注冊(cè)哦～第?264?篇 數(shù)據(jù)分析展示就用DataHunter

－End－

關(guān)于?DataHunter

DataHunter 是一家專業(yè)的數(shù)據(jù)分析和商業(yè)智能服務(wù)提供商，注冊(cè)于2014年。團(tuán)隊(duì)核心成員來(lái)自?IBM、Oracle、SAP?等知名公司，深耕大數(shù)據(jù)分析領(lǐng)域，具有十余年豐富的企業(yè)服務(wù)經(jīng)驗(yàn)。

DataHunter 旗下核心產(chǎn)品智能數(shù)據(jù)分析平臺(tái)?Data Analytics、數(shù)據(jù)大屏設(shè)計(jì)配置工具?Data MAX?已在業(yè)內(nèi)形成自己的獨(dú)特優(yōu)勢(shì)，并在各行業(yè)積累了眾多標(biāo)桿客戶和成功案例。

成立以來(lái)，DataHunter就致力于為客戶提供實(shí)時(shí)、高效、智能的數(shù)據(jù)分析展示解決方案，幫助企業(yè)查看分析數(shù)據(jù)并改進(jìn)業(yè)務(wù)，成為最值得信賴的數(shù)據(jù)業(yè)務(wù)公司。

更多精彩文章

漲技能|教你一招，快速制作箱線圖！

如何利用Data Analytics快速制作桑基圖？

用上這個(gè)數(shù)據(jù)可視化工具，讓你的數(shù)據(jù)會(huì)說(shuō)話

活用這23種圖表，讓你的數(shù)據(jù)分析勝人一籌

31個(gè)驚艷的數(shù)據(jù)可視化作品，讓你感受“數(shù)據(jù)之美”！

DataHunter 攜手某工業(yè)互聯(lián)網(wǎng)平臺(tái) 用智慧數(shù)據(jù)賦能工業(yè)4.0

交通態(tài)勢(shì)盡收眼底，DataHunter為智慧交通提供數(shù)據(jù)大屏方案

點(diǎn)擊“閱讀原文”，?歡迎使用 Data Analytics

總結(jié)

以上是生活随笔為你收集整理的elementui的tree组件页面显示不出数据_只要10分钟，教你配置出炫酷的数据可视化大屏...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。