《終端數(shù)據(jù)可視化》課件-7 新能源汽車(chē)數(shù)據(jù)大屏

單元7新能源汽車(chē)數(shù)據(jù)大屏大數(shù)據(jù)可視化應(yīng)用開(kāi)發(fā)項(xiàng)目式教程單元描述1.技術(shù)要求：（1）數(shù)據(jù)分析維度的抽?。唬?）數(shù)據(jù)與圖表的適配選擇；（3）靈活運(yùn)用Vue和EChart，進(jìn)行項(xiàng)目整合。2.能力要求：（1）數(shù)據(jù)分析維度的抽取；（2）數(shù)據(jù)與圖表的適配選擇；（3）靈活運(yùn)用Vue和EChart，進(jìn)行項(xiàng)目整合。3.素養(yǎng)要求：（1）具有良好的溝通的能力和良好的團(tuán)隊(duì)合作精神；（2）具備較強(qiáng)的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)和創(chuàng)新思想。基于新能源汽車(chē)研發(fā)生產(chǎn)、售后維護(hù)場(chǎng)景的實(shí)際需要，建立“研發(fā)與維護(hù)”可視化數(shù)據(jù)大屏，實(shí)現(xiàn)車(chē)輛運(yùn)行監(jiān)測(cè)、故障統(tǒng)計(jì)等數(shù)據(jù)的直觀呈現(xiàn)，最終效果如圖7-1所示。1圖7-1新能源汽車(chē)大數(shù)據(jù)分析可視化大屏任務(wù)名稱任務(wù)目標(biāo)安排課時(shí)任務(wù)7.1建立數(shù)據(jù)分析維度基于應(yīng)用需求，抽取核心指標(biāo)2任務(wù)7.2大屏布局根據(jù)主要、次要、輔助信息合理布局2任務(wù)7.3大屏實(shí)現(xiàn)綜合運(yùn)用Vue、ECharts編碼實(shí)現(xiàn)2總計(jì)6任務(wù)分解2知識(shí)要點(diǎn)大屏設(shè)計(jì)步驟大屏布局大屏設(shè)計(jì)技巧1.大屏設(shè)計(jì)步驟大屏數(shù)據(jù)可視化設(shè)計(jì)遵循的原則：設(shè)計(jì)服務(wù)需求、先總覽后細(xì)節(jié)。①設(shè)計(jì)服務(wù)需求大屏設(shè)計(jì)的排版布局、效果設(shè)計(jì)、圖表選用等應(yīng)服務(wù)于具體業(yè)務(wù)，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。那什么是業(yè)務(wù)需求呢？業(yè)務(wù)需求就是要解決的問(wèn)題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過(guò)設(shè)計(jì)手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)，是大屏數(shù)據(jù)可視化的價(jià)值所在。②先總覽后細(xì)節(jié)大屏因?yàn)榇螅休d數(shù)據(jù)多，為了避免觀者迷失，大屏信息呈現(xiàn)要具備重點(diǎn)突出、主次分明。設(shè)計(jì)時(shí)可以通過(guò)利用對(duì)比，先把核心數(shù)據(jù)拋給用戶，待用戶理解大屏主要內(nèi)容與展示邏輯后，再逐級(jí)瀏覽二三級(jí)內(nèi)容。因而，部分細(xì)節(jié)數(shù)據(jù)可暫時(shí)隱藏，用戶需要時(shí)可通過(guò)鼠標(biāo)點(diǎn)擊等交互方式喚起。（1）確定設(shè)計(jì)原則1.大屏設(shè)計(jì)步驟通過(guò)可視化表達(dá)什么樣的規(guī)律和信息，可以從“聯(lián)系、分布、比較、構(gòu)成”4個(gè)維度更有邏輯的思考這個(gè)問(wèn)題。①聯(lián)系：數(shù)據(jù)之間的相關(guān)性。②分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律。③比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面。④構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。（2）確立指標(biāo)分析維度1.大屏設(shè)計(jì)步驟選定圖表注意事項(xiàng)：易理解、可實(shí)現(xiàn)。數(shù)據(jù)關(guān)系分成了9個(gè)大類，當(dāng)確定了某個(gè)數(shù)據(jù)關(guān)系類型后，就可以根據(jù)該數(shù)據(jù)的使用場(chǎng)景確定相對(duì)應(yīng)的圖表和使用建議，并在其中進(jìn)行選擇，見(jiàn)表7-1。（3）圖表的選擇數(shù)據(jù)關(guān)系場(chǎng)景舉例圖表類型比較類銷(xiāo)售人員的銷(xiāo)售業(yè)績(jī)柱形圖、氣泡圖、雷達(dá)圖分布類運(yùn)行車(chē)輛的分布散點(diǎn)圖、氣泡圖、分布曲線圖地圖類車(chē)輛分布熱度熱力圖占比類故障部件占比環(huán)形圖、柱形圖、餅圖區(qū)間類車(chē)輛行駛速度區(qū)間儀表盤(pán)、堆疊圖關(guān)聯(lián)類客運(yùn)公司車(chē)隊(duì)車(chē)型關(guān)聯(lián)關(guān)系矩形樹(shù)圖時(shí)間類不同時(shí)間工況參數(shù)柱形圖、儀表盤(pán)、面積圖圖7-1典型的數(shù)據(jù)關(guān)系與圖表類型對(duì)照表1.大屏設(shè)計(jì)步驟可以大致分為以下3類：●地理數(shù)據(jù)分析：對(duì)于那些和地理位置信息相關(guān)的數(shù)據(jù)分析，地圖是用戶的首選類型，包括點(diǎn)地圖、區(qū)域地圖、熱力地圖、流向地圖等等。因?yàn)榈貓D除了能對(duì)比分析數(shù)據(jù)本身的差異性之外，還可以結(jié)合地理位置進(jìn)行分析，發(fā)掘和地理位置信息等相關(guān)的業(yè)務(wù)價(jià)值。●周期性數(shù)據(jù)分析：對(duì)于周期性循環(huán)數(shù)據(jù)特征分析，比如企業(yè)經(jīng)營(yíng)狀況——收益性、生產(chǎn)性、流動(dòng)性、安全性和成長(zhǎng)性的評(píng)價(jià)（適用于快速對(duì)比定位短板指標(biāo)），所以建議使用雷達(dá)圖進(jìn)行展示?！駮r(shí)間趨勢(shì)分析：人們?nèi)粘９ぷ髦袘?yīng)用最為廣泛的方法之一。對(duì)于這類場(chǎng)景，通?？梢赃x擇折線圖、柱狀圖來(lái)更好地進(jìn)行數(shù)據(jù)時(shí)間趨勢(shì)的分析。（3）圖表的選擇2.大屏布局為了做到大屏布局時(shí)的重點(diǎn)突出、主次分明，一般將待展示數(shù)據(jù)分為主要指標(biāo)和次要指標(biāo)兩個(gè)層次，主要指標(biāo)反映核心業(yè)務(wù)，次要指標(biāo)用于進(jìn)一步闡述分析。在制作時(shí)給予不一樣的側(cè)重，這里推薦2種常見(jiàn)的版式，如圖7-2和圖7-3所示。圖7-2可視化大屏布局信息圖圖7-3可視化大屏布局信息圖3.大屏設(shè)計(jì)技巧合理的布局能夠讓內(nèi)容富有層次感，合理的配色則能夠給觀者以舒適的體驗(yàn)。顏色是最有效的美學(xué)特征之一，它可以最先吸引觀察者的注意力。如圖7-4所示分別給出了對(duì)比分明和顏色相近的配色方案。（1）配色技巧（a）對(duì)比度分明的顏色搭配（b）顏色相近的色彩搭配圖7-4配色搭配示例3.大屏設(shè)計(jì)技巧值得注意的是，背景色很大程序決定了大屏的風(fēng)格，背景色的選擇遵循深色調(diào)和一致性的原則。如圖7-5所示給出2種推薦的示例配色方案。注意：由于大屏主要是由拼接屏構(gòu)成，在設(shè)計(jì)上應(yīng)該考慮背景色與拼縫的顏色相近，盡可能降低拼縫給大屏整體造成的隔裂感。（1）配色技巧圖7-5大屏背景色搭配示例3.大屏設(shè)計(jì)技巧確定了大屏的主要配色方案后，采用一些帶有星空、條紋等的圖片或線條作為背景，可以讓大屏效果富有科技感。為各個(gè)組件、標(biāo)題添加一些邊框來(lái)提升細(xì)節(jié)處的觀感，比如為小標(biāo)題所在的報(bào)表塊組件添加合適的背景，給各個(gè)組件添加邊框元素。比如頂部的標(biāo)題通過(guò)左右兩個(gè)對(duì)稱線條進(jìn)行點(diǎn)綴，各個(gè)組件的細(xì)分標(biāo)題通過(guò)不規(guī)則漸變色圖片進(jìn)行點(diǎn)綴。再比如航空大屏，給元素增加一些飛機(jī)圖標(biāo)、圖畫(huà)之類的擬物效果，讓大屏更真實(shí)生動(dòng)。（2）修飾技巧3.大屏設(shè)計(jì)技巧大屏數(shù)據(jù)展示過(guò)程中，適當(dāng)添加動(dòng)效、插入視頻，可以顯著提升整體的視覺(jué)效果、增添交互樂(lè)趣。動(dòng)效的形式包括監(jiān)控現(xiàn)場(chǎng)視頻、過(guò)場(chǎng)動(dòng)畫(huà)、輪播動(dòng)畫(huà)、圖表的閃爍動(dòng)畫(huà)、地圖的流向動(dòng)畫(huà)等等。應(yīng)用中可以添加實(shí)時(shí)數(shù)據(jù)以強(qiáng)化監(jiān)控效果，讓其每隔2~3秒獲取最新數(shù)據(jù)并刷新顯示。借助輪播效果，可以完成實(shí)現(xiàn)同一個(gè)位置滾動(dòng)播放不同的指標(biāo)內(nèi)容，避免平鋪展開(kāi)所有指標(biāo)把大屏界面擠滿。注意：在增加動(dòng)效的同時(shí)，需考慮服務(wù)器的承載量。避免在增加動(dòng)效后喧賓奪主，因此對(duì)動(dòng)效要做適當(dāng)?shù)娜∩?。?）動(dòng)效添加任務(wù)7.1建立數(shù)據(jù)分析維度根據(jù)項(xiàng)目要求，參考圖7-1，確立“研發(fā)與維護(hù)”可視化大屏的數(shù)據(jù)分析維度。1.任務(wù)描述2.任務(wù)分析本部分首先根據(jù)業(yè)務(wù)場(chǎng)景抽取關(guān)鍵指標(biāo)，依據(jù)關(guān)鍵指標(biāo)確定分析維度，接下來(lái)選擇與之相適應(yīng)的可視化圖表類型。本部分過(guò)程如圖7-6所示：根據(jù)業(yè)務(wù)場(chǎng)景抽取關(guān)鍵指標(biāo)建立指標(biāo)分析維度選定可視化圖表類型圖7-6大屏布局確立過(guò)程示意圖任務(wù)7.1建立數(shù)據(jù)分析維度（1）抽取關(guān)鍵指標(biāo)關(guān)鍵指標(biāo)是一些概括性詞語(yǔ)，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過(guò)關(guān)鍵指標(biāo)定義，就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。以共享單車(chē)電子圍欄監(jiān)控系統(tǒng)為例，這里的關(guān)鍵指標(biāo)有：企業(yè)停車(chē)時(shí)長(zhǎng)、企業(yè)違停量、熱點(diǎn)違停區(qū)域、車(chē)輛入欄率等。3.任務(wù)實(shí)施（2）建立分析維度關(guān)鍵指標(biāo)是一些概括性詞語(yǔ)，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過(guò)關(guān)鍵指標(biāo)定義，就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。以共享單車(chē)電子圍欄監(jiān)控系統(tǒng)為例，這里的關(guān)鍵指標(biāo)有：企業(yè)停車(chē)時(shí)長(zhǎng)、企業(yè)違停量、熱點(diǎn)違停區(qū)域、車(chē)輛入欄率等。任務(wù)7.1建立數(shù)據(jù)分析維度（3）選擇可視化圖表類型確定好分析維度后，所能選用的圖表類型也就基本確定了。接下來(lái)只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)設(shè)計(jì)意圖的那個(gè)就好了。由于維修業(yè)務(wù)遍布全國(guó)，核心區(qū)域用地圖展示比較直觀。另外，對(duì)比類的數(shù)據(jù)適合用柱形圖、雷達(dá)圖，趨勢(shì)類數(shù)據(jù)適用折線圖，占比類的數(shù)據(jù)適合用餅圖，故障單、維修人員明細(xì)數(shù)據(jù)適合用表格。這樣就確定了布局里的幾個(gè)主要元素：地圖、數(shù)字、柱形圖、餅圖、折線圖、表格。3.任務(wù)實(shí)施任務(wù)7.1建立數(shù)據(jù)分析維度如圖7-7所示，確立“車(chē)輛銷(xiāo)售”可視化大屏的數(shù)據(jù)分析維度。4.同步訓(xùn)練圖7-7車(chē)輛銷(xiāo)售大屏效果圖任務(wù)7.2實(shí)現(xiàn)大屏布局根據(jù)項(xiàng)目要求，本節(jié)實(shí)現(xiàn)“研發(fā)與維護(hù)”數(shù)據(jù)大屏頁(yè)面布局。1.任務(wù)描述2.任務(wù)分析本部分首先考慮大屏的設(shè)計(jì)風(fēng)格，在確定數(shù)據(jù)大屏的尺寸后，進(jìn)行布局和頁(yè)面的劃分。這里的劃分，主要根據(jù)之前定好的業(yè)務(wù)指標(biāo)進(jìn)行，核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積；其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周?chē)归_(kāi)。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。本部分的過(guò)程如圖7-8所示：圖7-8大屏布局過(guò)程示意圖定義設(shè)計(jì)風(fēng)格頁(yè)面布局與劃分確定設(shè)計(jì)稿（尺寸）任務(wù)7.2實(shí)現(xiàn)大屏布局（1）定義設(shè)計(jì)風(fēng)格新能源汽車(chē)“研發(fā)與維護(hù)大屏”的用戶為企業(yè)管理人員、研發(fā)工程師和售后工程師等相關(guān)人群。要求沉穩(wěn)簡(jiǎn)練，布局科學(xué)緊湊，圖表選取恰當(dāng)、配色合理。此外，大屏的視覺(jué)效果要體現(xiàn)良好的科技感。3.任務(wù)實(shí)施（2）獲取大屏尺寸一般情況下設(shè)計(jì)稿的分辨率就拼接大屏的分辨率，當(dāng)有多個(gè)信號(hào)源時(shí)，有時(shí)會(huì)通過(guò)顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時(shí)，對(duì)應(yīng)設(shè)計(jì)稿的分辨率也就變成了設(shè)置后的分辨率。任務(wù)7.2實(shí)現(xiàn)大屏布局3.任務(wù)實(shí)施（2）獲取大屏尺寸一般情況下設(shè)計(jì)稿的分辨率就拼接大屏的分辨率，當(dāng)有多個(gè)信號(hào)源時(shí)，有時(shí)會(huì)通過(guò)顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時(shí)，對(duì)應(yīng)設(shè)計(jì)稿的分辨率也就變成了設(shè)置后的分辨率。如圖7-9所示，是一種典型的拼接大屏構(gòu)成示意圖。播放控制設(shè)備++圖7-94*3構(gòu)成的拼接大屏系統(tǒng)示意圖任務(wù)7.2實(shí)現(xiàn)大屏布局3.任務(wù)實(shí)施（3）頁(yè)面布局在本系統(tǒng)的實(shí)時(shí)監(jiān)測(cè)頁(yè)面中采用的就是單列布局，這是最簡(jiǎn)潔的一種，整個(gè)頁(yè)面給人一種清爽干凈的感覺(jué)，其布局結(jié)構(gòu)如圖7-10所示。圖7-10“研發(fā)與維護(hù)”大屏布局結(jié)構(gòu)示意圖任務(wù)7.2實(shí)現(xiàn)大屏布局圍繞車(chē)輛銷(xiāo)售人員的實(shí)際需求，結(jié)合圖7-7，確立“車(chē)輛銷(xiāo)售”可視化大屏的布局。4.同步訓(xùn)練任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)在上一節(jié)任務(wù)基礎(chǔ)上，結(jié)合圖7-1的設(shè)計(jì)效果，通過(guò)編碼實(shí)現(xiàn)數(shù)據(jù)大屏的最終效果。1.任務(wù)描述2.任務(wù)分析通過(guò)任務(wù)7.1和7.2，完成了數(shù)據(jù)大屏的分析和規(guī)劃，變?yōu)榫唧w的Web可視化大屏作品還是要通過(guò)具體的編碼予以實(shí)現(xiàn)。任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（1）自適應(yīng)布局本大屏頁(yè)面中采用的是單列布局，首先劃分左中右區(qū)域。實(shí)現(xiàn)代碼如下：3.任務(wù)實(shí)施任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（1）自適應(yīng)布局在制作頁(yè)面的時(shí)候，經(jīng)常會(huì)碰到元素的寬度或者高度為100%的情況。如果這個(gè)元素有margin，padding，border的時(shí)候，此時(shí)的元素整體必會(huì)大于父級(jí)元素，就擾亂了原來(lái)的布局。為了解決這種問(wèn)題，可以采用過(guò)CSS3中的calc()屬性。下面來(lái)看怎么用CSS來(lái)實(shí)現(xiàn)：3.任務(wù)實(shí)施任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（2）業(yè)務(wù)模塊布局頁(yè)面整體大布局搭好之后，可以將擬定好的業(yè)務(wù)內(nèi)容分別計(jì)劃排版。3.任務(wù)實(shí)施任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（2）業(yè)務(wù)模塊布局樣式代碼：3.任務(wù)實(shí)施任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）布局完成后，對(duì)照要表達(dá)顯示的信息，思考選擇相應(yīng)的圖表類型，見(jiàn)表7-2。3.任務(wù)實(shí)施指標(biāo)圖表指標(biāo)圖表車(chē)輛分布地圖熱力圖故障比例餅圖故障維修統(tǒng)計(jì)折線圖故障分布城市柱形圖車(chē)輛情況柱形圖故障報(bào)警表格城市維修Top柱形圖

表7-2研發(fā)與維護(hù)大屏數(shù)據(jù)分析維度與選圖對(duì)照表任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）①基于準(zhǔn)備好的DOM，初始化ECharts實(shí)例ECharts的具體配置，如圖例、坐標(biāo)等，可參考ECharts的配置項(xiàng)文檔（/option.html#title）。建立ECharts組件前，要先引入中國(guó)地圖數(shù)據(jù)import'echarts/map/js/china.js';3.任務(wù)實(shí)施任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）建立ECharts組件：3.任務(wù)實(shí)施這時(shí)候的地圖數(shù)據(jù)為空，如圖7-11所示。圖7-11數(shù)據(jù)為空的地圖任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）②通過(guò)Axios獲取數(shù)據(jù)動(dòng)態(tài)賦值通過(guò)Axios獲取數(shù)據(jù)后，再次對(duì)圖表的options對(duì)象進(jìn)行配置，將數(shù)據(jù)填充進(jìn)去。具體代碼如下：3.任務(wù)實(shí)施任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）③自適應(yīng)圖表EChart圖表本身是提供了一個(gè)resize的函數(shù)的。于是當(dāng)瀏覽器發(fā)生resize事件的時(shí)候，讓其觸發(fā)echart的resize事件，重繪Canvas，可以完成自適應(yīng)，就是把window的onresize事件賦值為echart的resize事件。window.addEventListener("resize",()=>{echart.resize();});3.任務(wù)實(shí)施任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）③實(shí)現(xiàn)效果，如圖7-12所示。3.任務(wù)實(shí)施圖7-12車(chē)輛分布熱力圖任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）①折線圖3.任務(wù)實(shí)施圖7-13車(chē)輛部件故障與維修情況折線圖任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）②柱狀圖3.任務(wù)實(shí)施圖7-14城市車(chē)輛維修與報(bào)修柱狀圖任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（3）選擇圖表并獲取數(shù)據(jù)（以地圖分布為例）③餅圖3.任務(wù)實(shí)施圖7-15車(chē)輛部件故障比例餅圖任務(wù)7.3數(shù)據(jù)大屏實(shí)現(xiàn)（4）效果修飾①加粗高亮數(shù)字大屏首先讓用戶通過(guò)直接的數(shù)字感知總體全情況。②圖片點(diǎn)綴各個(gè)組件的細(xì)分標(biāo)題通過(guò)不規(guī)則漸變色圖片進(jìn)行點(diǎn)綴，讓大屏更真實(shí)生動(dòng)。③動(dòng)畫(huà)為大屏增加合適的動(dòng)畫(huà)效果能夠顯著提高畫(huà)面的觀感。大屏動(dòng)畫(huà)形式上包括背景動(dòng)畫(huà)、刷新的加載動(dòng)畫(huà)、輪播動(dòng)畫(huà)、圖表的閃爍動(dòng)畫(huà)、地圖的流向動(dòng)畫(huà)等等。如添加實(shí)時(shí)數(shù)據(jù)以強(qiáng)化監(jiān)控效果，讓其每隔1秒獲取最新數(shù)據(jù)并刷新顯示，這樣故障報(bào)修單會(huì)實(shí)時(shí)動(dòng)態(tài)變化。3.任務(wù)實(shí)施任務(wù)7.2實(shí)現(xiàn)大屏布局（1）參考圖7-8，實(shí)現(xiàn)“車(chē)輛銷(xiāo)售”主題可視化大屏。（2）請(qǐng)圍繞“車(chē)隊(duì)管理”服務(wù)，設(shè)計(jì)制作一個(gè)可視化數(shù)據(jù)大屏，具體要求如下：頁(yè)面中應(yīng)與新能源汽車(chē)系統(tǒng)的整體風(fēng)格統(tǒng)一，包括導(dǎo)航、查詢和數(shù)據(jù)呈現(xiàn)三大部分。參考如圖7-17