《終端數(shù)據(jù)可視化》課件-5 數(shù)據(jù)可視化設(shè)計(jì)基礎(chǔ)

單元5數(shù)據(jù)可視化設(shè)計(jì)基礎(chǔ)大數(shù)據(jù)可視化應(yīng)用開發(fā)項(xiàng)目式教程單元描述1.技術(shù)要求：（1）利用ECharts制作圖表;（2）利用D3制作圖表。2.能力要求：（1）能合理分析和選用采集的數(shù)據(jù)；（2）能根據(jù)需求選擇合適的圖表；（3）能根據(jù)Web頁(yè)面匹配圖表風(fēng)格；（4）能根據(jù)需求優(yōu)化圖表。3.素養(yǎng)要求：（1）具有良好的與人溝通的能力和分析力；（2）具有一定的美感和藝術(shù)設(shè)計(jì)素質(zhì)；（3）具有精益求精的工匠精神。數(shù)據(jù)可視化旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。為了有效地傳達(dá)思想概念，需要將外觀與功能齊頭并進(jìn)，直觀地傳達(dá)關(guān)鍵的方面與特征，從而實(shí)現(xiàn)對(duì)于相對(duì)稀疏而又復(fù)雜的數(shù)據(jù)集的深入洞察。那么怎么把數(shù)據(jù)可視化做得美觀、直觀、有價(jià)值呢？這離不開數(shù)據(jù)可視化設(shè)計(jì)。本項(xiàng)目旨在掌握基礎(chǔ)的ECharts和D3制作圖表的方法，能制作出“研發(fā)與維修”模塊中實(shí)時(shí)監(jiān)測(cè)頁(yè)面和統(tǒng)計(jì)分析頁(yè)面中各種類型的圖表，使圖表呈現(xiàn)的內(nèi)容便于使用者識(shí)讀，呈現(xiàn)的效果與整體頁(yè)面風(fēng)格一致。1任務(wù)名稱任務(wù)目標(biāo)安排課時(shí)任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化掌握數(shù)據(jù)可視化的設(shè)計(jì)流程2任務(wù)5.2使用ECharts實(shí)現(xiàn)車輛數(shù)據(jù)可視化掌握用ECharts實(shí)現(xiàn)常用圖表的方法6任務(wù)5.3使用D3完成車輛實(shí)時(shí)監(jiān)控可視化掌握用D3.js實(shí)現(xiàn)常用圖表的方法4總計(jì)12任務(wù)分解2知識(shí)要點(diǎn)有效可視化創(chuàng)建步驟及常用工具ECharts基礎(chǔ)D3基礎(chǔ)1.有效可視化創(chuàng)建步驟及常用工具要在海量的數(shù)據(jù)中抓取出有用的信息越來越困難，而通過可視化可以對(duì)信息進(jìn)行總結(jié)，把信息組織起來，幫助用戶識(shí)別所分析的數(shù)據(jù)中的一種模式或趨勢(shì)，把注意力集中于關(guān)鍵點(diǎn)。通?？梢园疵鞔_問題、選取數(shù)據(jù)、匹配圖表、確定風(fēng)格、優(yōu)化圖表、檢查測(cè)試6個(gè)關(guān)鍵步驟來創(chuàng)建有效的信息可視化，如圖5-2所示。（1）創(chuàng)建有效可視化的步驟明確問題選取數(shù)據(jù)匹配圖表確定風(fēng)格優(yōu)化圖表檢查測(cè)試圖5-2創(chuàng)建有效可視化步驟明確問題是要明確通過這個(gè)圖表可以幫助用戶獲取到哪些幫助。清晰的問題可以避免把不相干的事物一起放在圖表中進(jìn)行比較，從而引人困惑。為創(chuàng)建可視化而提出的問題應(yīng)盡可能以數(shù)據(jù)為中心?？梢砸浴霸谀睦铩薄ⅰ笆裁磿r(shí)間”、“有多少”、“有多頻繁”等來進(jìn)行開頭，它們使用戶專注于在特定的參數(shù)集合內(nèi)查找數(shù)據(jù)，因此更有可能找到適用于可視化的數(shù)據(jù)。以車輛監(jiān)控為例，可以提出如某車在某個(gè)時(shí)間段的車速信息、某車在某個(gè)時(shí)間段的電流/電壓變化趨勢(shì)、某車實(shí)時(shí)的轉(zhuǎn)速/車速/總里程數(shù)等需求。（2）明確問題1.有效可視化創(chuàng)建步驟及常用工具明確要用圖表回答哪些問題后，就需要選取合適的數(shù)據(jù)。而想要清楚地展現(xiàn)數(shù)據(jù)，就要充分了解數(shù)據(jù)庫(kù)以及每個(gè)變量的含義。在車輛監(jiān)控中，需要展示車輛的相關(guān)信息，包括總電流/電壓、荷電狀態(tài)、車輛速度、加速踏板、自動(dòng)踏板、檔位等相關(guān)信息，查看的視角主要用宏觀和關(guān)聯(lián)。如要查看某車在某個(gè)時(shí)間段的車速信息，可以選取車架號(hào)、車速和采集時(shí)間3個(gè)字段。（3）選取數(shù)據(jù)1.有效可視化創(chuàng)建步驟及常用工具確定可視化項(xiàng)目的目標(biāo)和數(shù)據(jù)后，下一步是建立一個(gè)基本的圖形。它可能是餅圖、線圖、流程圖、散點(diǎn)圖、雷達(dá)圖、地圖、網(wǎng)絡(luò)圖等等，取決于手頭的數(shù)據(jù)是什么樣子。人們接觸的數(shù)據(jù)，通常包含5種相關(guān)關(guān)系：構(gòu)成、比較、趨勢(shì)、分布及聯(lián)系。不同類型的數(shù)據(jù)各自有其最適合的圖表類型，如圖5-3所示。（4）匹配圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-3圖表建議-思維指南（4）匹配圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-4新增故障比例統(tǒng)計(jì)圖5-6車輛速度圖5-7加速踏板圖5-9全國(guó)銷售情況圖5-10電池單體代號(hào)圖5-11儀表圖其他趨勢(shì)聯(lián)系分布比較構(gòu)成這里的風(fēng)格是指圖表的整體風(fēng)格要與網(wǎng)站一致，包括配色、字體、交互性、等因素。網(wǎng)頁(yè)設(shè)計(jì)中的色彩都是經(jīng)過精心選擇的，即使是簡(jiǎn)單的黑白效果也有著諸多講究，色彩的運(yùn)用將會(huì)對(duì)于用戶的視覺體驗(yàn)產(chǎn)生不可忽視的影響。每一種色彩都有其對(duì)應(yīng)的心理聯(lián)系。而且色彩本身也有其自己的吸引力層次。色彩可以增強(qiáng)用戶的視覺體驗(yàn)，通過不同色彩之間的對(duì)比可以來制造反差。將兩種對(duì)比強(qiáng)烈的色彩組合在一起能夠比互補(bǔ)型色彩組合更惹人注目。因此掌握一些最基本的色彩搭配方法，然后靈活運(yùn)用，并多多學(xué)習(xí)和借鑒就可以搭配出色彩豐富的圖表效果了。（5）確定風(fēng)格1.有效可視化創(chuàng)建步驟及常用工具優(yōu)化圖表包括調(diào)整圖表各維度的值、添加或修改圖表中的解釋信息，比如圖例、數(shù)據(jù)標(biāo)簽等，使圖表更“可視”。（6）優(yōu)化圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-12餅圖表現(xiàn)方式比較圖5-13面積圖表現(xiàn)方式比較圖5-14散點(diǎn)圖表現(xiàn)方式比較優(yōu)化圖表包括調(diào)整圖表各維度的值、添加或修改圖表中的解釋信息，比如圖例、數(shù)據(jù)標(biāo)簽等，使圖表更“可視”。（6）優(yōu)化圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-15柱狀表現(xiàn)方式比較圖5-16同類數(shù)據(jù)歸類效果圖5-17誤導(dǎo)用戶的圖表ECharts簡(jiǎn)介ECharts，一個(gè)使用JavaScript實(shí)現(xiàn)的開源可視化庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的矢量圖形庫(kù)ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。D3簡(jiǎn)介D3的全稱是（Data-DrivenDocuments），顧名思義是一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的文檔，即一個(gè)JavaScript的函數(shù)庫(kù)，使用它主要是用來做數(shù)據(jù)可視化的。D3可以將任意數(shù)據(jù)綁定至文檔對(duì)象模型（DOM），然后基于數(shù)據(jù)驅(qū)動(dòng)原理操作文檔的生成。HighCharts簡(jiǎn)介Highcharts是一個(gè)用純JavaScript編寫的一個(gè)圖表庫(kù)，能夠很簡(jiǎn)單便捷的在Web網(wǎng)站或是Web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。（7）常用可視化工具1.有效可視化創(chuàng)建步驟及常用工具2.ECharts基礎(chǔ)①?gòu)墓倬W(wǎng)下載界面（/download.html）；②在ECharts的GitHub（/apache/incubator-echarts）上下載最新release版本；③通過npm獲取Echarts，npminstallecharts–save；④CDN引入，在cdnjs（/libraries/echarts）、npmcdn（/echarts@latest/dist/）或者國(guó)內(nèi)的bootcdn（/echarts/）上找到ECharts的最新版本。（1）獲取ECharts要制作一個(gè)ECharts的圖表的基本步驟包括：獲取ECharts庫(kù)→引入ECharts庫(kù)→準(zhǔn)備一個(gè)具備高度的DOM容器→通過echarts.init方法初始化一個(gè)ECharts實(shí)例→通過setOption方法生成圖表，具體如圖5-20所示。（2）如何實(shí)現(xiàn)Echarts圖表2.ECharts基礎(chǔ)獲取Echarts庫(kù)（官網(wǎng)）引入Echarts庫(kù)（網(wǎng)頁(yè)）準(zhǔn)備一個(gè)具備高度的DOM容器通過echarts.init方法初始化一個(gè)echarts實(shí)例通過setOption方法生成圖表圖5-20實(shí)現(xiàn)ECharts圖表步驟示意圖在ECharts官網(wǎng)中有詳細(xì)教程以及API，因?yàn)镋Charts圖表有自己的一套屬性，因此需要什么效果就得去遵守它的屬性，只有識(shí)別圖表的各個(gè)部分的專業(yè)名稱，才能從它API中獲取相應(yīng)屬性從而實(shí)現(xiàn)想要的效果。（2）如何實(shí)現(xiàn)Echarts圖表2.ECharts基礎(chǔ)圖5-21圖表中的專有名詞圖5-22配置項(xiàng)手冊(cè)HTML5提供兩種強(qiáng)有力的“畫布”：SVG和Canvas。（1）SVG畫布3.D3基礎(chǔ)SVG的特點(diǎn)：SVG繪制的是矢量圖，因此對(duì)圖像進(jìn)行放大不會(huì)失真?；赬ML，可以為每個(gè)元素添加JavaScript事件處理器。每個(gè)圖形均視為對(duì)象，更改對(duì)象的屬性，圖形也會(huì)改變。不適合游戲應(yīng)用。Canvas的特點(diǎn)：

繪制的是位圖，圖像放大后會(huì)失真。不支持事件處理器。能夠以.png或.jpg格式保存圖像。適合游戲應(yīng)用。利用比例尺的目的主要是將某一區(qū)域的值映射到另一區(qū)域，其大小關(guān)系不變，也就是說，讓圖形自適應(yīng)畫布的大小。在數(shù)學(xué)中，x的范圍被稱為定義域，y的范圍被稱為值域。D3中的比例尺，也有定義域和值域，分別被稱為domain和range。只要指定domain和range的范圍，就可得到一個(gè)計(jì)算關(guān)系。（2）比例尺3.D3基礎(chǔ)線性比例尺d3.scale.linear()d3.scale.linear()返回一個(gè)線性比例尺。domain()和range()分別設(shè)定比例尺的定義域和值域。序數(shù)比例尺d3.scale.ordinal()

d3.scale.ordinal()返回一個(gè)線性比例尺。domain()和range()分別設(shè)定比例尺的定義域和值域。vardataset=[1.2,2.3,0.9,1.5,3.3];varmin=d3.min(dataset);varmax=d3.max(dataset);varlinear=d3.scale.linear().domain([min,max]).range([0,300]);linear(0.9);//返回0linear(2.3);//返回175linear(3.3);//返回300varindex=[0,1,2,3,4];varcolor=["red","blue","green","yellow","black"];varordinal=d3.scale.ordinal().domain(index).range(color);ordinal(0);//返回redordinal(2);//返回greenordinal(4);//返回blackD3中用于定義坐標(biāo)軸的組件=d3.svg.axis()（3）坐標(biāo)軸3.D3基礎(chǔ)vardataset=[2.5,2.1,1.7,1.3,0.9];varlinear=d3.scale.linear()

.domain([0,d3.max(dataset)]).range([0,250]);

varaxis=d3.svg.axis().scale(linear)

.orient("bottom")

.ticks(7);//追加到畫布上svg.append("g").attr("class","axis").attr("transform","translate(20,130)").call(axis);在總電壓的數(shù)據(jù)中有用到時(shí)間，然后如何直接用這個(gè)數(shù)據(jù)會(huì)發(fā)生錯(cuò)誤，因此需要用到format方法來對(duì)其進(jìn)行處理。（4）時(shí)間格式轉(zhuǎn)換（TimeFormatting）3.D3基礎(chǔ)d3.time.format：創(chuàng)建基于某種時(shí)間格式的本地時(shí)間格式轉(zhuǎn)換器?！駀ormat：將一個(gè)date對(duì)象轉(zhuǎn)換成特定時(shí)間格式的字符串?！駀ormat.parse：將特定時(shí)間格式的字符串轉(zhuǎn)換成date對(duì)象?！馾3.time.format.utc：創(chuàng)建基于某種時(shí)間格式的世界標(biāo)準(zhǔn)時(shí)間（UTC）格式轉(zhuǎn)換器?！馾3.time.format.iso：創(chuàng)建基于某種時(shí)間格式的ISO世界標(biāo)準(zhǔn)時(shí)間（ISO8601UTC）格式轉(zhuǎn)換器?！駎ickFormat(d3.time.format("%H:%M"))：表示刻度格式化，也就是輸出時(shí)間格式為13：15的刻度。任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化分析新能源汽車大數(shù)據(jù)分析系統(tǒng)中“研發(fā)與維修”模塊中的單車實(shí)時(shí)監(jiān)控頁(yè)面，明確其需要呈現(xiàn)的車輛數(shù)據(jù)，并選擇合適的圖表進(jìn)行呈現(xiàn)。1.任務(wù)描述本系統(tǒng)以單車實(shí)時(shí)監(jiān)控為例，按照可視化設(shè)計(jì)的主要流程明確問題、選取數(shù)據(jù)、匹配圖表、確定風(fēng)格、優(yōu)化圖表、檢查測(cè)試，為單車監(jiān)控頁(yè)面創(chuàng)建有效的信息可視化。2.任務(wù)分析任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化（1）明確問題新能源汽車大數(shù)據(jù)分析系統(tǒng)在對(duì)單車進(jìn)行實(shí)時(shí)監(jiān)控時(shí)，需要實(shí)時(shí)查看的信息包括整車信息、機(jī)電信息、電池信息、發(fā)電機(jī)信息和極值信息。整車信息中需要實(shí)時(shí)顯示單車的總電流/電壓、荷電狀態(tài)、車輛速度、加速踏板、自動(dòng)踏板、檔位等相關(guān)信息。機(jī)電信息中需要實(shí)時(shí)顯示溫度、轉(zhuǎn)速/扭矩、機(jī)電電流/電壓等信息。電池信息中需要實(shí)時(shí)顯示燃料電池電流/電壓、燃料耗費(fèi)率、濃度/壓力等信息。發(fā)電機(jī)信息中需要實(shí)時(shí)顯示曲率轉(zhuǎn)速、燃料消耗率等相關(guān)信息。極值信息中需要實(shí)時(shí)顯示電壓、溫度、電池單體代號(hào)、探針序號(hào)等相關(guān)信息。3.任務(wù)實(shí)施任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化（2）選取數(shù)據(jù)在本系統(tǒng)的數(shù)據(jù)庫(kù)中，與車輛數(shù)據(jù)相關(guān)的表有整車數(shù)據(jù)表、驅(qū)動(dòng)電機(jī)表、燃料電池表、引擎表、定位表、極值表和警告表。根據(jù)前面分析的單車實(shí)時(shí)監(jiān)控的需求，需要選取對(duì)應(yīng)的表和合適的字段。以整車信息選取數(shù)據(jù)為例，其數(shù)據(jù)可以從整車數(shù)據(jù)表中進(jìn)行選取。整車數(shù)據(jù)表中包括車架號(hào)、數(shù)據(jù)采集時(shí)間、車輛狀態(tài)、充電狀態(tài)、運(yùn)行模式、車輛速度、累計(jì)里程、總電壓、總電流、荷電狀態(tài)、檔位、絕緣電阻、加速踏板行程值、制動(dòng)踏板狀態(tài)等字段。3.任務(wù)實(shí)施圖表信息需要字段總電流/電壓車架號(hào)、數(shù)據(jù)采集時(shí)間、總電壓、總電流荷電狀態(tài)車架號(hào)、荷電狀態(tài)車輛速度車架號(hào)、數(shù)據(jù)采集時(shí)間、車輛速度加速踏板車架號(hào)、數(shù)據(jù)采集時(shí)間、加速踏板行程值制動(dòng)踏板車架號(hào)、數(shù)據(jù)采集時(shí)間、制動(dòng)踏板狀態(tài)檔位車架號(hào)、數(shù)據(jù)采集時(shí)間、檔位車速/加速踏板/檔位車架號(hào)、數(shù)據(jù)采集時(shí)間、車輛速度、加速踏板行程值、檔位任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化（3）匹配圖表要如何去選擇圖表呢？以整車信息為例，總電流/電壓，需要反映出在某個(gè)時(shí)間段中單車的總電流和總電壓的變化情況，可以用折線圖、柱形圖或面積圖來表示，在本系統(tǒng)中選用的是面積圖；荷電狀態(tài)，需要反映蓄電池使用一段時(shí)間或長(zhǎng)期擱置不用后的剩余容量與其完全充電狀態(tài)的容量的比值，可以用餅圖來表示，在本系統(tǒng)中選用的是餅圖中的圓環(huán)圖類型。此外車輛速度、加速踏板、制動(dòng)踏板、檔位這幾項(xiàng)也都是需要反映出某個(gè)時(shí)間段的變化情況，因此也都也選用折線圖、柱形圖或面積圖來實(shí)現(xiàn)，具體的選用對(duì)比見表5-4。3.任務(wù)實(shí)施圖表信息可以用的圖表本系統(tǒng)選用的圖表總電流/電壓折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖堆疊面積圖荷電狀態(tài)餅圖、環(huán)形圖、堆疊面積圖、堆疊柱狀圖環(huán)形圖車輛速度折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖條形圖加速踏板折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖折線圖制動(dòng)踏板折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖面積圖檔位折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖柱形圖車速/加速踏板/檔位折線圖、柱形圖、條形圖等的組合圖折線與柱形圖的組合圖任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化（4）確定風(fēng)格圖表的風(fēng)格應(yīng)與網(wǎng)站整體風(fēng)格一致。本系統(tǒng)平臺(tái)整體的視覺風(fēng)格為目前主流的扁平化風(fēng)，在色彩上采用明度偏暗的藍(lán)色（

#0d2458）為標(biāo)準(zhǔn)色，代表科技與創(chuàng)新；再配以藍(lán)色系的其他顏色如

#6aace9、

#1d48a6、#427dff，以及

#19e1e1、#39c39f、#01de99、#ec6e6f、#e84e68等顏色為輔助色，圖表中要呈現(xiàn)的趨勢(shì)變化等就是用這些明亮色系的顏色來突顯出來的，如車速/加速踏板/檔位表的設(shè)計(jì)效果如圖5-26所示。3.任務(wù)實(shí)施圖5-26車速/加速踏板/檔位表任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化（5）優(yōu)化圖表確定選用的圖表和其風(fēng)格后，還需要繼續(xù)優(yōu)化圖表，使其最終的呈現(xiàn)效果更易理解。比如調(diào)整X軸和Y的刻度單位直到合理、調(diào)整刻度之間的間隔值、給排名數(shù)據(jù)先進(jìn)行排序、加上交互導(dǎo)航，使圖形更“可視”等。3.任務(wù)實(shí)施任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化（6）檢查測(cè)試最后一個(gè)環(huán)節(jié)是檢查測(cè)試，應(yīng)從頭到尾過一遍是否滿足需求；在不同的瀏覽器中預(yù)覽效果以確定用戶是否方便閱讀以及兼容性、動(dòng)效能否達(dá)到預(yù)期、色差是否能接受等。3.任務(wù)實(shí)施任務(wù)5.1認(rèn)識(shí)數(shù)據(jù)可視化任務(wù)5.2使用ECharts實(shí)現(xiàn)車輛數(shù)據(jù)可視化研發(fā)維修板塊中，單車監(jiān)控欄目需要提供與車輛速度、總電流、總電壓等圖表，統(tǒng)計(jì)分析中需要提供新增故障比例、新增故障數(shù)量、車輛城市分布Top10等圖表，從而為相關(guān)人員的工作提供參考數(shù)據(jù)。本次任務(wù)中采用ECharts實(shí)現(xiàn)其中車輛城市分布Top10、新增故障比例、總電流的圖表。1.任務(wù)描述單車監(jiān)控和統(tǒng)計(jì)分析欄目中的車輛城市分布Top10、新增故障比例、總電流這3張圖表，根據(jù)對(duì)其所要反饋的情況，分別用柱狀圖、餅圖、面積圖來表示。通過獲取ECharts、引入ECharts、制作圖表、完善圖表4個(gè)步驟最終完成所需的圖表。2.任務(wù)分析任務(wù)5.2使用ECharts實(shí)現(xiàn)車輛數(shù)據(jù)可視化（1）獲取ECharts在瀏覽器中輸入網(wǎng)址/dist/echarts.js，下載ECharts的源代碼版本，右擊另存為保存到站點(diǎn)文件夾中，如圖5-27所示。3.任務(wù)實(shí)施任務(wù)5.2使用ECharts實(shí)現(xiàn)車輛數(shù)據(jù)可視化圖5-27下載ECharts源代碼（2）引入ECharts從ECharts3開始引入方式更為，只需要像普通的JavaScript庫(kù)一樣用script標(biāo)簽引入即可，具體代碼如下：3.任務(wù)實(shí)施任務(wù)5.2使用ECharts實(shí)現(xiàn)車輛數(shù)據(jù)可視化

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<!--引入ECharts文件-->

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

</head>

</html>（3）制作圖表3.任務(wù)實(shí)施圖5-28車輛城市分布Top柱狀圖初始效果圖圖5-29新增故障比例餅圖初始效果圖圖5-30新增故障比例餅圖初始效果圖任務(wù)5.2使用ECharts實(shí)現(xiàn)車輛數(shù)據(jù)可視化采用D3實(shí)現(xiàn)研發(fā)維修板塊中，單車監(jiān)控欄目的圖表。1.任務(wù)描述任務(wù)5.3使用D3完成車輛實(shí)時(shí)監(jiān)控可視化圖5-31D3實(shí)現(xiàn)的車速折線圖效果單車時(shí)間監(jiān)控中的總電壓采用折線圖呈現(xiàn)，其效果如圖5-31所示，通過添加SVG畫布、準(zhǔn)備數(shù)據(jù)、定義坐標(biāo)軸、繪制折線、繪制數(shù)據(jù)點(diǎn)來實(shí)現(xiàn)。2.任務(wù)分析任務(wù)5.3使用D3完成車輛實(shí)時(shí)監(jiān)控可視化（1）下載并加載D3文件（2）添加SVG畫布（3）準(zhǔn)備數(shù)據(jù)（4）定義坐標(biāo)軸（5）繪制折線3.任務(wù)實(shí)施任務(wù)5.3使用D3完成車輛實(shí)時(shí)監(jiān)控可視化一、選擇題1．下列哪個(gè)圖表不能很好地表達(dá)比較的關(guān)系（）。A．柱形圖B．餅圖C．雷達(dá)圖D．曲線圖2．在ECharts中用于說明是柱形圖的是哪個(gè)單詞（）。A．lineB．