數(shù)據(jù)可視化概念

數(shù)據(jù)可視化是指大量、相對(duì)復(fù)雜的數(shù)據(jù)以表格、圖形等形式被映射到界面，更形象地表達(dá)數(shù)據(jù)的內(nèi)在信息和規(guī)律，以便人員快速識(shí)別數(shù)據(jù)趨勢(shì)和異常值等內(nèi)容。在互聯(lián)網(wǎng)新技術(shù)的支持下，可視化數(shù)據(jù)不僅具有可視功能，還具有互動(dòng)功能。

數(shù)字可視化技術(shù)

數(shù)字可視化技術(shù)主要包括HTML5標(biāo)準(zhǔn)、ECharts組件、Vue框架。數(shù)字可視化系統(tǒng)開(kāi)發(fā)基于web瀏覽器技術(shù)，采用B/S網(wǎng)絡(luò)架構(gòu)和關(guān)系型數(shù)據(jù)庫(kù)。原生基礎(chǔ)架構(gòu)開(kāi)發(fā)使用HTML、JavaScript、CSS等語(yǔ)言，Vue、MyBatis等框架?？梢暬瘓D表制作使用ECharts或Highcharts等組件。動(dòng)畫(huà)效果制作使用Unity、Blender、AE等軟件。

HTML5標(biāo)準(zhǔn)

HTML5是新一代HTML標(biāo)準(zhǔn)，增加了圖形效果顯示和媒介回放元素，進(jìn)一步增強(qiáng)了HTML標(biāo)記語(yǔ)義，能更好地支持本地離線(xiàn)存儲(chǔ)，大幅加強(qiáng)調(diào)層疊樣式表（CSS3）與JavaScript語(yǔ)言的結(jié)合能力，使頁(yè)面布局更清晰、特效更豐富、展示更美觀、適配更簡(jiǎn)單。

ECharts組件

ECharts組件是一種開(kāi)源化JavaScript語(yǔ)言庫(kù)，其底層依賴(lài)輕量級(jí)Canvas庫(kù)的ZRender組件。它能創(chuàng)建交互式可視化圖表，提供豐富的功能和配置選項(xiàng)，完成高度個(gè)性化定制的可視化圖表繪制。ECharts組件不僅具有數(shù)據(jù)分析和圖表繪制功能，而且具備豐富的交互功能，可以實(shí)現(xiàn)圖表縮放、平移、選擇、聯(lián)動(dòng)等操作。

Vue框架

Vue框架是一種可創(chuàng)建用戶(hù)界面的JavaScript語(yǔ)言框架。它基于HTML，CSS、JavaScript語(yǔ)言構(gòu)建而成，并提供一套聲明式、組件化編程模型，幫助業(yè)務(wù)人員高效地開(kāi)發(fā)用戶(hù)界面。

數(shù)字可視化解決方案設(shè)計(jì)流程

數(shù)字可視化解決方案通常以展示大屏為載體，利用大屏展示信息多、可供多人觀看的特點(diǎn)，為公司或團(tuán)隊(duì)決策提供信息依據(jù)。其應(yīng)用包括業(yè)務(wù)數(shù)據(jù)分析、任務(wù)完成率監(jiān)測(cè)、工作進(jìn)度預(yù)測(cè)等多種場(chǎng)景。

數(shù)字可視化解決方案的核心價(jià)值是為業(yè)務(wù)提供可視化信息。因此，其設(shè)計(jì)流程應(yīng)以業(yè)務(wù)為中心，排版、布局、圖表等元素選用應(yīng)滿(mǎn)足業(yè)務(wù)需求。在設(shè)計(jì)初期，技術(shù)人員應(yīng)確定方案應(yīng)表達(dá)的業(yè)務(wù)場(chǎng)景、關(guān)鍵指標(biāo)；根據(jù)展示界面的要求，確定展示界面的尺寸、色差、亮度等要素；根據(jù)用戶(hù)需求，確定可視化圖表樣式、風(fēng)格、布局，從而構(gòu)建有效的數(shù)字可視化解決方案。

系統(tǒng)建設(shè)

系統(tǒng)建設(shè)目的

本文提及的現(xiàn)有無(wú)人機(jī)運(yùn)維系統(tǒng)是一種基于B/S網(wǎng)絡(luò)架構(gòu)的web服務(wù)軟件，主要對(duì)各項(xiàng)無(wú)人機(jī)運(yùn)維數(shù)據(jù)進(jìn)行在線(xiàn)集成、報(bào)送、統(tǒng)計(jì)。但是，它更關(guān)注表單報(bào)送和數(shù)據(jù)統(tǒng)計(jì)的需求，僅供業(yè)務(wù)人員處理業(yè)務(wù)流程，管理人員無(wú)法利用系統(tǒng)中的數(shù)據(jù)來(lái)管控整體運(yùn)維業(yè)務(wù)和開(kāi)展輔助決策。

為了提升無(wú)人機(jī)運(yùn)維管理水平，充分利用現(xiàn)有運(yùn)維數(shù)據(jù)和軟硬件系統(tǒng)，滿(mǎn)足無(wú)人機(jī)運(yùn)維業(yè)務(wù)需求，現(xiàn)有無(wú)人機(jī)運(yùn)維系統(tǒng)需要實(shí)施技術(shù)改進(jìn)。采用數(shù)字可視化技術(shù)的新系統(tǒng)能提供可視化數(shù)據(jù)，幫助管理人員及時(shí)掌握無(wú)人機(jī)運(yùn)維業(yè)務(wù)的整體態(tài)勢(shì)，發(fā)現(xiàn)無(wú)人機(jī)運(yùn)維管理的薄弱環(huán)節(jié)，提前預(yù)警，做好相關(guān)準(zhǔn)備工作，提升無(wú)人機(jī)售后管理效率。

建設(shè)需求確定

在設(shè)計(jì)初期，技術(shù)人員首先要明確數(shù)字可視化無(wú)人機(jī)運(yùn)維系統(tǒng)建設(shè)需求和目標(biāo)用戶(hù)需求。本次系統(tǒng)建設(shè)的主要需求是現(xiàn)有無(wú)人機(jī)運(yùn)維系統(tǒng)中的數(shù)據(jù)需要整合，應(yīng)以圖表、動(dòng)畫(huà)等形式向人員進(jìn)行展示信息。新建成的系統(tǒng)主要有兩種應(yīng)用場(chǎng)景。一是交互式窗體為管理人員提供無(wú)人機(jī)和人員等動(dòng)態(tài)信息；二是數(shù)字可視化信息在大屏上播放，供客戶(hù)及相關(guān)方觀看。

運(yùn)維管理人員需要掌握無(wú)人機(jī)、人員、設(shè)備三種信息。無(wú)人機(jī)信息包括無(wú)人機(jī)總運(yùn)營(yíng)時(shí)間、下次保養(yǎng)的預(yù)計(jì)時(shí)間、飛行任務(wù)類(lèi)型、無(wú)人機(jī)部署位置、近期飛行架次、總飛行架次等統(tǒng)計(jì)；人員信息涉及人員所在位置、各駐地人員變化信息、各地運(yùn)維工作量等統(tǒng)計(jì)；設(shè)備信息是設(shè)備運(yùn)行狀態(tài)、設(shè)備流轉(zhuǎn)記錄、維修保養(yǎng)記錄等內(nèi)容。

系統(tǒng)架構(gòu)設(shè)計(jì)

系統(tǒng)開(kāi)發(fā)采用B/S網(wǎng)絡(luò)架構(gòu)，實(shí)現(xiàn)了前后端分離。后端部署在網(wǎng)絡(luò)服務(wù)器，用戶(hù)使用Web瀏覽器訪問(wèn)前端界面。系統(tǒng)開(kāi)發(fā)基于HTML、CSS和JavaScript語(yǔ)言，使用Vue3.0框架，圖表等可視化功能開(kāi)發(fā)使用ECharts組件；后端開(kāi)發(fā)使用SpringBoot、Mybatis框架。后端與MySQL數(shù)據(jù)庫(kù)進(jìn)行交互，并將查詢(xún)數(shù)據(jù)以JSON的形式發(fā)送到前端。

功能板塊設(shè)計(jì)

首先，根據(jù)無(wú)人機(jī)運(yùn)維業(yè)務(wù)需求，技術(shù)人員設(shè)計(jì)無(wú)人機(jī)信息、人員信息、設(shè)備信息三個(gè)功能板塊。

無(wú)人機(jī)信息展示無(wú)人機(jī)數(shù)量、無(wú)人機(jī)部署位置、基于分類(lèi)統(tǒng)計(jì)的飛行架次和運(yùn)營(yíng)時(shí)間、每架無(wú)人機(jī)的平均飛行高度和平均運(yùn)營(yíng)時(shí)間、每架無(wú)人機(jī)的出動(dòng)率、每架無(wú)人機(jī)的任務(wù)類(lèi)型、近期無(wú)人機(jī)飛行任務(wù)等統(tǒng)計(jì)。

人員信息展示人員所在位置、人員數(shù)量、基于分類(lèi)統(tǒng)計(jì)的人員數(shù)量和人員工作天數(shù)、近期人員行程、專(zhuān)業(yè)人員數(shù)量、專(zhuān)業(yè)人員工作記錄、各地運(yùn)維工作量等統(tǒng)計(jì)。

設(shè)備信息展示設(shè)備運(yùn)行狀態(tài)、設(shè)備裝機(jī)時(shí)間、設(shè)備運(yùn)行時(shí)間、設(shè)備運(yùn)輸記錄、設(shè)備拆裝記錄、設(shè)備維修記錄等內(nèi)容。

其次，根據(jù)功能板塊展示的內(nèi)容，技術(shù)人員對(duì)設(shè)計(jì)所需的數(shù)據(jù)進(jìn)行整理。

無(wú)人機(jī)信息板塊主要涉及無(wú)人機(jī)編號(hào)、部署地點(diǎn)、所屬單位、任務(wù)類(lèi)型、任務(wù)日期、起飛時(shí)間、降落時(shí)間、飛行高度等數(shù)據(jù)。

人員信息包含人員姓名、專(zhuān)業(yè)、工作所在地與飛行、維修、拆裝等工單中數(shù)據(jù)的關(guān)聯(lián)關(guān)系，人員工作所在地變更記錄、人員工作變更時(shí)間等數(shù)據(jù)。

設(shè)備信息包括設(shè)備名稱(chēng)、設(shè)備編號(hào)、裝機(jī)時(shí)間，設(shè)備與飛行、維修、拆裝等工單中數(shù)據(jù)的關(guān)聯(lián)關(guān)系，設(shè)備運(yùn)行狀態(tài)等數(shù)據(jù)。

最后，技術(shù)人員將設(shè)計(jì)所需數(shù)據(jù)與現(xiàn)有數(shù)據(jù)庫(kù)中數(shù)據(jù)的類(lèi)型、格式和范圍進(jìn)行對(duì)比，提取滿(mǎn)足需求的數(shù)據(jù)。如果現(xiàn)有數(shù)據(jù)庫(kù)中的數(shù)據(jù)不能滿(mǎn)足所需數(shù)據(jù)的要求，技術(shù)人員需要明確需要補(bǔ)充或修改的數(shù)據(jù)，更新工單格式。

視覺(jué)效果設(shè)計(jì)

視覺(jué)效果設(shè)計(jì)主要涉及背景色、主題色彩、排版布局三種元素設(shè)計(jì)。

1.背景色設(shè)計(jì)

背景色與展示場(chǎng)景的顏色關(guān)系密切。若頁(yè)面在大屏設(shè)備上展示，本文普遍推薦深色作為背景色。深色背景可以有效削弱大屏拼縫帶來(lái)的視覺(jué)分割，也能減小屏幕色差對(duì)視覺(jué)的影響，同時(shí)還可以突出圖表信息，引導(dǎo)觀看人員將視覺(jué)集中在展示內(nèi)容上。

2.主題色彩設(shè)計(jì)

在頁(yè)面制作前，技術(shù)人員對(duì)頁(yè)面中的圖表、邊框、懸窗等元素的顏色明度和飽和度進(jìn)行設(shè)計(jì)，統(tǒng)一整個(gè)頁(yè)面的色彩風(fēng)格，確保頁(yè)面在展示大量數(shù)據(jù)的同時(shí)，不會(huì)讓觀看者感到混亂。技術(shù)人員使用相同顏色表達(dá)同一數(shù)據(jù)類(lèi)型，使用相近顏色表達(dá)數(shù)據(jù)關(guān)系，使用互補(bǔ)色表達(dá)數(shù)據(jù)對(duì)比關(guān)系?？萍?、工業(yè)產(chǎn)品的可視化數(shù)據(jù)通常采用青色、藍(lán)綠色、藍(lán)色等主題色，這些顏色能呈現(xiàn)一定的科技感。

3.排版布局設(shè)計(jì)

首先，技術(shù)人員需要了解展示屏幕的物理尺寸。當(dāng)屏幕物理尺寸的長(zhǎng)寬比與屏幕分辨率尺寸的長(zhǎng)寬比不一致時(shí)，屏幕會(huì)自動(dòng)調(diào)整顯示內(nèi)容的分辨率，導(dǎo)致屏幕顯示內(nèi)容與設(shè)計(jì)內(nèi)容不一致；第二，技術(shù)人員先對(duì)功能板塊需要展示的信息進(jìn)行分配。信息的主要指標(biāo)需呈現(xiàn)在屏幕中央，在屏幕上占較大面積，方便觀看者快速識(shí)別信息，然后按照從上到下、從左到右的優(yōu)先級(jí)順序，對(duì)其他次要指標(biāo)進(jìn)行排版布局。表達(dá)內(nèi)容相近的圖表盡量排在一起，以減輕觀看者的認(rèn)知負(fù)擔(dān)。圖1為排版布局設(shè)計(jì)效果圖。

可視化設(shè)計(jì)

可視化設(shè)計(jì)的核心目的是實(shí)現(xiàn)更好的數(shù)據(jù)表達(dá)。因此，可視化設(shè)計(jì)過(guò)程不能脫離數(shù)據(jù)分析，需要滿(mǎn)足信息準(zhǔn)確表達(dá)、簡(jiǎn)單易懂兩大原則。

在可視化設(shè)計(jì)過(guò)程的第一步，技術(shù)人員采用分析維度對(duì)功能板塊需要展示的所有指標(biāo)進(jìn)行可視化設(shè)計(jì)。分析維度是正確表達(dá)數(shù)字規(guī)律和信息的可視化設(shè)計(jì)方法，主要分為比較、分布、構(gòu)成、聯(lián)系四類(lèi)維度。

1.比較維度

通過(guò)不同數(shù)據(jù)與變量之間的對(duì)比分析，比較維度找出數(shù)據(jù)與變量之間的差異、相似性或數(shù)據(jù)變化趨勢(shì)。該維度比較不同時(shí)間的數(shù)據(jù)，不同組織或部門(mén)的數(shù)據(jù)，不同產(chǎn)品、服務(wù)的表現(xiàn)等指標(biāo)，以幫助分析人員了解不同數(shù)據(jù)之間的關(guān)系，找出數(shù)據(jù)變化趨勢(shì)，為人員做出合理的決策提供支持。

2.分布維度

通過(guò)數(shù)據(jù)分布分析，分布維度能夠提供數(shù)據(jù)的集中程度、離散程度以及可能存在的規(guī)律等信息，目的是幫助分析人員了解數(shù)據(jù)的整體情況，找出數(shù)據(jù)特點(diǎn)和內(nèi)在規(guī)律，為后續(xù)分析和決策提供支持?；诜植季S度的展示信息包含平均值、中位數(shù)等指標(biāo)統(tǒng)計(jì)，以及正態(tài)分布、偏態(tài)分布等數(shù)據(jù)分布形狀。

3.構(gòu)成維度

通過(guò)數(shù)據(jù)組成分析，構(gòu)成維度提供各種數(shù)據(jù)在整個(gè)數(shù)據(jù)集中的占比。例如，銷(xiāo)售收入中不同產(chǎn)品收入的比例。目的是幫助分析人員了解數(shù)據(jù)組成，找出數(shù)據(jù)集中的重要數(shù)據(jù)，為資源優(yōu)化分配和決策提供參考。

4.聯(lián)系維度

通過(guò)數(shù)據(jù)之間的相關(guān)性、關(guān)聯(lián)性分析，聯(lián)系維度提供不同變量之間的互動(dòng)關(guān)系，發(fā)現(xiàn)變量之間的潛在關(guān)系，預(yù)測(cè)數(shù)據(jù)未來(lái)趨勢(shì)，識(shí)別影響因素等信息。目的是幫助分析人員發(fā)現(xiàn)數(shù)據(jù)之間的關(guān)聯(lián)關(guān)系，找出影響變量的因素，為正確決策和預(yù)測(cè)提供支持。

下面介紹不同維度所建設(shè)的數(shù)字可視化無(wú)人機(jī)運(yùn)維方案。

無(wú)人機(jī)飛行架次統(tǒng)計(jì)圖可以列出無(wú)人機(jī)在不同年度完成不同項(xiàng)目的飛行架次，以及無(wú)人機(jī)在不同年度完成同一客戶(hù)項(xiàng)目的飛行架次。本文使用比較維度，以橫條圖的形式對(duì)飛行架次統(tǒng)計(jì)進(jìn)行直觀展示。在圖2中，橫條圖表達(dá)了無(wú)人機(jī)在不同年度完成不同項(xiàng)目的飛行架次統(tǒng)計(jì)。

無(wú)人機(jī)出動(dòng)率統(tǒng)計(jì)圖表達(dá)了任務(wù)數(shù)量與時(shí)間之間的關(guān)系。本文使用分布維度，以波形圖的形式表達(dá)無(wú)人機(jī)出動(dòng)率的變化。

效果評(píng)估和方案迭代

當(dāng)系統(tǒng)設(shè)計(jì)完成后，技術(shù)人員繪制一個(gè)初步設(shè)計(jì)效果樣圖，并提交給項(xiàng)目相關(guān)方評(píng)估，然后逐步完善設(shè)計(jì)方案。設(shè)計(jì)效果評(píng)估和設(shè)計(jì)方案迭代需關(guān)注以下幾點(diǎn)。

第一，評(píng)估和迭代過(guò)程要遵循從整體到局部的原則。技術(shù)人員首先應(yīng)確定布局和色彩風(fēng)格；再逐步修改圖表、文字、互動(dòng)效果等元素，防止在修改過(guò)程中反復(fù)推倒重來(lái)。

第二，評(píng)估和迭代操作最好利用實(shí)際使用中的屏幕，避免在系統(tǒng)建設(shè)完成后，技術(shù)人員才發(fā)現(xiàn)屏幕色差、文字不清晰、框體變形等問(wèn)題。

第三，懸窗、變換、發(fā)光等互動(dòng)效果均要完成全面測(cè)試，防止網(wǎng)絡(luò)或程序運(yùn)行速度慢等因素造成數(shù)據(jù)加載緩慢、崩潰、卡頓，刷新異常等問(wèn)題。

第四，所有圖表測(cè)試均需使用真實(shí)數(shù)據(jù)。真實(shí)數(shù)據(jù)分布跨度較大，會(huì)影響圖表的可讀性和數(shù)據(jù)特征，技術(shù)人員需要根據(jù)真實(shí)數(shù)據(jù)調(diào)整圖表樣式。

其他優(yōu)化設(shè)計(jì)

1.字體使用

技術(shù)人員在使用字體的過(guò)程中，首先應(yīng)考慮觀看者是否能清晰識(shí)別字體，是否能清晰分辨O與0?？萍几休^強(qiáng)的界面應(yīng)避免使用較為繁復(fù)的字體，防止字體與整體風(fēng)格不匹配。最后，需要注意字體是否可以免費(fèi)使用。

在方案調(diào)試過(guò)程中，技術(shù)人員需要注意字體包是否與其他組件兼容，不同瀏覽器顯示的字體是否一致等現(xiàn)象。

2.動(dòng)態(tài)效果設(shè)計(jì)

為了設(shè)計(jì)更具動(dòng)感的可視化效果，技術(shù)人員通常使用輪播、光效動(dòng)畫(huà)等方式讓界面呈現(xiàn)動(dòng)態(tài)效果。在動(dòng)態(tài)效果制作過(guò)程中，需要注意動(dòng)態(tài)效果是否會(huì)影響人員觀看展示內(nèi)容。

3.互動(dòng)效果設(shè)計(jì)

為了在同一界面展示更多數(shù)據(jù)內(nèi)容，技術(shù)人員往往使用鉆取、變換等手段設(shè)計(jì)互動(dòng)效果。但是需要注意互動(dòng)點(diǎn)擊區(qū)域在屏幕尺寸變化后是否會(huì)產(chǎn)生偏移，互動(dòng)返回邏輯是否順暢。

總結(jié)

以無(wú)人機(jī)運(yùn)維業(yè)務(wù)全要素管理為導(dǎo)向的數(shù)據(jù)可視化設(shè)計(jì)與研究，實(shí)現(xiàn)了數(shù)字可視化無(wú)人機(jī)運(yùn)維系統(tǒng)建設(shè)。該系統(tǒng)能提供多維度圖表展示、全面的無(wú)人機(jī)運(yùn)維信息，幫助運(yùn)維管理人員實(shí)施有效的管理，提升工作效率、業(yè)務(wù)數(shù)據(jù)利用效率，為業(yè)務(wù)決策提供支持。