第十四章

數(shù)據(jù)大屏GOAL學(xué)習(xí)目標(biāo)1了解數(shù)據(jù)大屏的概念、特點(diǎn)和應(yīng)用場(chǎng)景2了解數(shù)據(jù)大屏設(shè)計(jì)的一般原則和流程3掌握數(shù)據(jù)大屏設(shè)計(jì)的基本方法4掌握利用Web前端開發(fā)技術(shù)制作靜態(tài)數(shù)據(jù)大屏的方法5掌握綜合利用Web前后端開發(fā)技術(shù)制作動(dòng)態(tài)數(shù)據(jù)大屏的方法目錄Contents14.1數(shù)據(jù)大屏簡(jiǎn)介14.2

數(shù)據(jù)大屏設(shè)計(jì)方法14.3

靜態(tài)大屏制作14.4

動(dòng)態(tài)大屏制作14.1數(shù)據(jù)大屏簡(jiǎn)介

數(shù)據(jù)大屏，又被稱為“商業(yè)智能儀表盤（BusinessIntelligenceDashboard，BIdashboard）”或“一張圖系統(tǒng)”，是數(shù)據(jù)可視化應(yīng)用系統(tǒng)流行的產(chǎn)品形態(tài)。數(shù)據(jù)大屏本質(zhì)上是將多個(gè)信息圖表整合在一個(gè)頁面上的單頁應(yīng)用，能夠在統(tǒng)一的界面上展示在時(shí)空上存在關(guān)聯(lián)的多維數(shù)據(jù)，是向用戶展示關(guān)鍵績(jī)效指標(biāo)（KeyPerformanceIndicator，KPI）的數(shù)據(jù)可視化工具。由于數(shù)據(jù)大屏具有信息量大、集中度高、視覺效果好、支持多維分析等優(yōu)勢(shì)，被廣泛應(yīng)用于商業(yè)智能、業(yè)務(wù)監(jiān)控、輔助決策、風(fēng)險(xiǎn)預(yù)警、地理分析、會(huì)議展覽等多種應(yīng)用場(chǎng)景中。14.1數(shù)據(jù)大屏簡(jiǎn)介14.2

數(shù)據(jù)大屏設(shè)計(jì)方法14.2.1設(shè)計(jì)原則一款設(shè)計(jì)良好的數(shù)據(jù)大屏作品不是圖表的簡(jiǎn)單堆砌，而是兼具科學(xué)性與藝術(shù)性的軟件工程產(chǎn)品，需要通過系統(tǒng)性、規(guī)范化的設(shè)計(jì)，才能滿足應(yīng)用需求。數(shù)據(jù)大屏的設(shè)計(jì)原則主要包括：需求導(dǎo)向、系統(tǒng)集成、科學(xué)布局、合理搭配、用戶友好。（1）需求導(dǎo)向數(shù)據(jù)大屏是為業(yè)務(wù)服務(wù)的，業(yè)務(wù)場(chǎng)景不同，則大屏呈現(xiàn)的關(guān)鍵績(jī)效指標(biāo)和展示組件也不相同。因此，大屏的設(shè)計(jì)，包括圖表選型、排版布局、色彩搭配、交互設(shè)計(jì)等各方面，都應(yīng)當(dāng)符合業(yè)務(wù)場(chǎng)景的實(shí)際需求，實(shí)現(xiàn)規(guī)范化與個(gè)性化的有機(jī)統(tǒng)一。14.2.1設(shè)計(jì)原則（2）系統(tǒng)集成系統(tǒng)集成包括數(shù)據(jù)集成和圖表集成兩層含義。其中，數(shù)據(jù)集成是指大屏應(yīng)當(dāng)具有單一的數(shù)據(jù)源并確保數(shù)據(jù)的完整性，從而保證報(bào)表結(jié)果的一致性、可靠性和可用性。圖表集成是指圖表之間應(yīng)當(dāng)具有互為佐證、互為補(bǔ)充的關(guān)系，使大屏從內(nèi)在邏輯和外觀樣式上都是一個(gè)有機(jī)統(tǒng)一的整體。14.2.1設(shè)計(jì)原則（3）科學(xué)布局大屏布局不僅影響用戶的視覺體驗(yàn)，還將引導(dǎo)用戶觀察與思考的過程，因此布局設(shè)計(jì)注重科學(xué)性與藝術(shù)性的有機(jī)統(tǒng)一?？茖W(xué)布局要求主題突出、層次分明。在設(shè)計(jì)時(shí)，通常把主要指標(biāo)放在頁面中部的醒目位置上，而把次要指標(biāo)放在四周或角落等次要位置上。14.2.1設(shè)計(jì)原則（4）合理搭配關(guān)系說明典型圖表比較指標(biāo)不同類別之間的比較。條形圖、折線圖分布指標(biāo)的時(shí)空分布或概率分布狀態(tài)。熱力圖、儀表盤聯(lián)系指標(biāo)之間的相關(guān)性。散點(diǎn)圖、平行坐標(biāo)圖構(gòu)成指標(biāo)的部分與整體之間的關(guān)系。餅圖、雷達(dá)圖表達(dá)“比較、分布、聯(lián)系、構(gòu)成”四類關(guān)系14.2.1設(shè)計(jì)原則（5）用戶友好在設(shè)計(jì)大屏的圖形界面和交互效果時(shí)，應(yīng)尊重用戶的習(xí)慣和體驗(yàn)，從用戶的角度出發(fā)，提升產(chǎn)品的易讀性、易理解性、交互性和用戶友好特性。比如，在動(dòng)態(tài)大屏中，數(shù)據(jù)的加載和刷新過程通常會(huì)有一定的延遲，可以考慮在這些時(shí)段使用過渡動(dòng)畫，將有助于緩解用戶的焦慮情緒，從而改善用戶體驗(yàn)。14.2.1設(shè)計(jì)原則14.2.2設(shè)計(jì)流程（1）需求分析：對(duì)業(yè)務(wù)場(chǎng)景進(jìn)行調(diào)研，確定系統(tǒng)的功能需求，并完成基礎(chǔ)數(shù)據(jù)采集工作。（2）指標(biāo)抽?。焊鶕?jù)需求，從“比較、分布、聯(lián)系、構(gòu)成”角度，對(duì)基礎(chǔ)數(shù)據(jù)進(jìn)行分析，抽取系統(tǒng)擬呈現(xiàn)的數(shù)據(jù)關(guān)系，即關(guān)鍵績(jī)效指標(biāo)，并將關(guān)鍵績(jī)效指標(biāo)分為主要指標(biāo)、次要指標(biāo)和輔助指標(biāo)。（3）圖表選型：為各項(xiàng)指標(biāo)選擇合適的信息圖表；分析各個(gè)圖表的數(shù)據(jù)需求，若基礎(chǔ)數(shù)據(jù)不能充分滿足圖表要求，則需考慮補(bǔ)充數(shù)據(jù)。（4）界面設(shè)計(jì)：設(shè)計(jì)大屏的整體布局；設(shè)計(jì)各圖表的外觀樣式；設(shè)計(jì)人機(jī)交互效果。開發(fā)“空氣質(zhì)量監(jiān)測(cè)數(shù)據(jù)可視化平臺(tái)”的目的，是為了展示空氣質(zhì)量指數(shù)的時(shí)空分布狀態(tài)，為大氣污染態(tài)勢(shì)分析提供輔助工具。基礎(chǔ)數(shù)據(jù)繼續(xù)使用在前期任務(wù)中創(chuàng)建的“airpollution”數(shù)據(jù)庫。14.2.3項(xiàng)目實(shí)戰(zhàn)（1）需求分析根據(jù)需求，確定了5個(gè)關(guān)鍵績(jī)效指標(biāo)。指標(biāo)之間的邏輯關(guān)系如下：K1為主要指標(biāo)，是對(duì)基本情況的描述；K2、K3、K4、K5為次要指標(biāo)，是對(duì)K1的分析和解釋。14.2.3項(xiàng)目實(shí)戰(zhàn)（2）指標(biāo)抽取指標(biāo)編碼指標(biāo)名稱指標(biāo)類別K1空氣質(zhì)量指數(shù)的排序與分類匯總主要指標(biāo)K2空氣質(zhì)量指數(shù)的最低值與最高值次要指標(biāo)K3空氣質(zhì)量指數(shù)與風(fēng)速的關(guān)系次要指標(biāo)K4空氣質(zhì)量指數(shù)的構(gòu)成情況次要指標(biāo)K5空氣質(zhì)量觀測(cè)記錄之間的聚類關(guān)系次要指標(biāo)為5個(gè)關(guān)鍵績(jī)效指標(biāo)選擇合適的圖表，并分析數(shù)據(jù)需求。為了適當(dāng)減少工作量，本例僅使用2018年1月1日至3日的觀測(cè)數(shù)據(jù)。14.2.3項(xiàng)目實(shí)戰(zhàn)（3）圖表選型指標(biāo)編碼圖表選型數(shù)據(jù)需求K1條形圖、餅圖34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)。K2儀表盤34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)。K3散點(diǎn)圖34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)、二分量風(fēng)速。K4雷達(dá)圖34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)及6個(gè)分指數(shù)。K5平行坐標(biāo)圖34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)及6種污染物的日均值。本例的界面設(shè)計(jì)效果如圖所示。頁面上分布著6個(gè)圖表，分別是：居中顯示的條形圖和餅圖，展示系統(tǒng)的主要指標(biāo)——空氣質(zhì)量指數(shù)的排序與分類匯總結(jié)果；左上方的儀表盤，展示空氣質(zhì)量指數(shù)的最低值與最高值；左下方的散點(diǎn)圖，展示空氣質(zhì)量指數(shù)與風(fēng)速絕對(duì)值的關(guān)系；右上方的雷達(dá)圖，展示空氣質(zhì)量指數(shù)的構(gòu)成情況；右下方的平行坐標(biāo)圖，展示空氣質(zhì)量觀測(cè)記錄之間的聚類關(guān)系。所有圖表都在時(shí)間軸的驅(qū)動(dòng)下，循環(huán)顯示2018年1月1日至3日的觀測(cè)數(shù)據(jù)。14.2.3項(xiàng)目實(shí)戰(zhàn)（4）界面設(shè)計(jì)14.3靜態(tài)大屏制作14.3.1準(zhǔn)備工作（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)14.3.1準(zhǔn)備工作（2）準(zhǔn)備HTML文檔<!DOCTYPEhtml><htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<scriptsrc="JS/echarts.js"></script>

<scriptsrc="JS/echarts-gl.min.js"></script>

<linkrel="stylesheet"href="CSS/main.css">

<title>空氣質(zhì)量監(jiān)測(cè)數(shù)據(jù)可視化平臺(tái)</title></head><body>

<divid="gauge"></div>

<divid="scatter3D"></div>

<divid="bar"></div>

<divid="radar"></div>

<divid="parallel"></div>

<scriptsrc="JS/gauge.js"></script>

<scriptsrc="JS/scatter3D.js"></script>

<scriptsrc="JS/bar.js"></script>

<scriptsrc="JS/radar.js"></script>

<scriptsrc="JS/parallel.js"></script></body>

</html>14.3.1準(zhǔn)備工作（3）設(shè)置元素樣式body{background-color:black;}#gauge{position:absolute;top:10%;width:40%;height:50%;}#radar{position:absolute;top:10%;left:67%;width:40%;height:50%;}#parallel{position:absolute;top:35%;left:70%;width:30%;height:63%;}#scatter3D{position:absolute;top:40%;width:35%;height:50%;}#bar{position:absolute;left:27%;width:60%;height:100%;}14.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備圖表數(shù)據(jù)格式儀表盤[{"name":"監(jiān)測(cè)站代碼","value":[AQI],...}]散點(diǎn)圖[[緯向風(fēng)速的絕對(duì)值,經(jīng)向風(fēng)速的絕對(duì)值,AQI],...]條形圖[AQI,...]餅圖[{name:"優(yōu)",value:[0,頻次統(tǒng)計(jì)]},...]雷達(dá)圖[{"name":"監(jiān)測(cè)站代碼","value":[AQI,IAQI_PM25,IAQI_PM10,IAQI_SO2,IAQI_NO2,IAQI_CO,IAQI_O3]},...]平行坐標(biāo)圖[{"name":"監(jiān)測(cè)站代碼"","value":[PM2.5濃度,PM10濃度,SO2濃度,NO2濃度,CO濃度,O3濃度,AQI,"AQI類別"]},...]儀表盤[{"name":"監(jiān)測(cè)站代碼","value":[AQI],...}]在“AirPollution_Dashboard_Static/JS”目錄下，新建“gauge.js”腳本，用于創(chuàng)建儀表盤，展示2018年1月1日至3日每日空氣質(zhì)量指數(shù)的最低值和最高值。由于需要使用時(shí)間軸組件實(shí)現(xiàn)自動(dòng)播放，因此儀表盤的配置中需要分別設(shè)置基礎(chǔ)配置項(xiàng)和可選配置項(xiàng)。14.3.2圖表制作（1）儀表盤14.3.2圖表制作（2）散點(diǎn)圖在“AirPollution_Dashboard_Static/JS”目錄下，新建“scatter3D.js”腳本，用于創(chuàng)建三維散點(diǎn)圖，分別展示2018年1月1日至3日34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)與風(fēng)速絕對(duì)值的關(guān)系。14.3.2圖表制作（3）條形圖和餅圖在“AirPollution_Dashboard_Static/JS”目錄下，新建“bar.js”腳本，用于創(chuàng)建條形圖和餅圖，分別展示2018年1月1日至3日34個(gè)監(jiān)測(cè)站空氣質(zhì)量指數(shù)的排序情況以及分類匯總情況?？紤]到餅圖的幅面較小，故將其與條形圖創(chuàng)建在同一個(gè)圖表實(shí)例中。14.3.2圖表制作（4）雷達(dá)圖在“AirPollution_Dashboard_Static/JS”目錄下，新建“radar.js”腳本，用于創(chuàng)建雷達(dá)圖，展示2018年1月1日至3日34個(gè)監(jiān)測(cè)站空氣質(zhì)量指數(shù)的構(gòu)成情況。14.3.2圖表制作（5）平行坐標(biāo)圖在“AirPollution_Dashboard_Static/JS”目錄下，新建“parallel.js”腳本，用于創(chuàng)建平行坐標(biāo)圖，展示2018年1月1日至3日34個(gè)監(jiān)測(cè)站空氣質(zhì)量觀測(cè)記錄之間的聚類關(guān)系。14.3.2圖表制作使用瀏覽器打開“index.html”查看數(shù)據(jù)大屏顯示效果

14.4動(dòng)態(tài)大屏制作14.4.1

準(zhǔn)備工作（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)14.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換函數(shù)名稱參數(shù)返回值transform(rawData)rawData：原始數(shù)據(jù)。新數(shù)據(jù)，在原始數(shù)據(jù)基礎(chǔ)上增加了IAQI、AQI、AQI類別等8個(gè)新字段。sortAQI(dct)dct：監(jiān)測(cè)站及其AQI的鍵值對(duì)。按照AQI排序后的鍵值對(duì)，用于實(shí)現(xiàn)條形圖的排序效果。countAQI(barData)barData：條形圖的數(shù)據(jù)體。餅圖的數(shù)據(jù)體，通過對(duì)條形圖的數(shù)據(jù)進(jìn)行分類匯總得到。getGaugeJSON(data)data：新數(shù)據(jù)。JSON字符串，用于儀表盤。getScatter3DJSON(data)data：新數(shù)據(jù)。JSON字符串，用于三維散點(diǎn)圖。getBarJSON(data)data：新數(shù)據(jù)。JSON字符串，用于條形圖和餅圖。getRadarJSON(data)data：新數(shù)據(jù)。JSON字符串，用于雷達(dá)圖。getParaJSON(data)data：新數(shù)據(jù)。JSON字符串，用于平行坐標(biāo)圖。fromflaskimportFlask,render_templatefrommodelimportgetDatafrompreprocessimporttransform,getRadarJSON,getGaugeJSON,getBarJSON,getParaJSON,getScatter3DJSONapp=Flask(__name__)@app.route('/')defindex():returnrender_template('index.html')14.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接口：添加5個(gè)視圖函數(shù)@app.route('/json_for_gauge')defjson_for_gauge():returngetGaugeJSON(newData)@app.route('/json_for_scatter3D')defjson_for_scatter3D():returngetScatter3DJSON(newData)@app.route('/json_for_bar')defjson_for_bar():returngetBarJSON(newData)@app.route('/json_for_radar')defjson_for_radar():

returngetRadarJSON(newData)

@app.route('/json_for_parallel')defjson_for_parallel():

returngetParaJSON(newData)

if__name__=='__main__':

sql='''

SELECTstation,pm25,pm10,so2,no2,co,o3,abs(u),abs(v)

FROM airpollutionWHERE(station='HI01' ORstation='NN01' ORstation='MO01' ORstation='HK01' ORstation='GZ01' ORstation='KM01' ORstation='TB01' ORstation='GY01' ORstation='FZ01' ORstation='CS01'ORstation='NC01' ORstation='CQ01' ORstation='LS01'14.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接口：添加5個(gè)視圖函數(shù) ORstation='CH01' ORstation='WH01' ORstation='HZ01' ORstation='SH01' ORstation='HF01' ORstation='NJ01'