《終端數(shù)據(jù)可視化》課件-6 數(shù)據(jù)可視化整合

單元6數(shù)據(jù)可視化整合大數(shù)據(jù)可視化應(yīng)用開發(fā)項(xiàng)目式教程單元描述1.技術(shù)要求：（1）利用DIV+CSS搭建網(wǎng)頁框架；（2）利用Axios獲取Json格式的數(shù)據(jù)；（3）利用ECharts實(shí)現(xiàn)Json數(shù)據(jù)的呈現(xiàn)，并具備交互功能；（4）利用輪詢技術(shù)實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)數(shù)據(jù)展示。2.能力要求：（1）熟練掌握HTML+CSS進(jìn)行網(wǎng)頁的制作；（2）熟練掌握VUE中Axios方法，能夠利用Axios()獲取數(shù)據(jù)；（3）熟練掌握腳本處理ECharts不同類型圖表對(duì)象所需的數(shù)據(jù)格式等；（4）熟悉輪詢技術(shù)，能實(shí)現(xiàn)車輛數(shù)據(jù)的實(shí)時(shí)更新。3.素養(yǎng)要求：（1）具有良好的與人溝通的能力和良好的團(tuán)隊(duì)合作精神；（2）具備較強(qiáng)的網(wǎng)頁設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)和創(chuàng)新思想；（3）具有一定的科學(xué)思維方式和分析問題、解決問題的能力。對(duì)于研發(fā)和維修人員而言，車輛的統(tǒng)計(jì)數(shù)據(jù)監(jiān)控和實(shí)時(shí)數(shù)據(jù)監(jiān)控是非常重要的兩個(gè)核心模塊，本單元將通過ECharts、Axios等技術(shù)實(shí)現(xiàn)后臺(tái)車輛數(shù)據(jù)（統(tǒng)計(jì)數(shù)據(jù)、實(shí)時(shí)數(shù)據(jù)）的可視化呈現(xiàn)。統(tǒng)計(jì)數(shù)據(jù)包括車輛故障比例、能耗統(tǒng)計(jì)、蓄電池平均電流電壓、車輛城市分布等，單車實(shí)時(shí)數(shù)據(jù)監(jiān)控主要包括：車速實(shí)時(shí)監(jiān)控、電流電壓實(shí)時(shí)監(jiān)控、電池溫度實(shí)時(shí)監(jiān)控以及相關(guān)極值的實(shí)時(shí)監(jiān)控。1任務(wù)名稱任務(wù)目標(biāo)安排課時(shí)任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)完成“研發(fā)與維修統(tǒng)計(jì)分析”的頁面設(shè)計(jì)與實(shí)現(xiàn)2任務(wù)6.2新增故障比例可視化展示通過VUE+ECharts技術(shù)實(shí)現(xiàn)故障比例餅圖2任務(wù)6.3車輛城市分布Top10可視化展示通過VUE+ECharts技術(shù)實(shí)現(xiàn)城市分布Top10柱狀圖2任務(wù)6.4單車總電流監(jiān)控可視化展示通過VUE+ECharts技術(shù)實(shí)現(xiàn)單車總電流曲線圖2任務(wù)6.5單車蓄電池溫度可視化展示通過VUE+ECharts技術(shù)實(shí)現(xiàn)蓄電池溫度3D圖2總計(jì)10任務(wù)分解2知識(shí)要點(diǎn)Ajax介紹Vue的生命周期async與await方法ECharts實(shí)現(xiàn)Web可視化圖表繪制知識(shí)要點(diǎn)知識(shí)要點(diǎn)Ajax介紹Vue的生命周期async與awaitECharts實(shí)現(xiàn)Web可視化圖表繪制1.Ajax介紹Ajax是一個(gè)無需重新加載整個(gè)網(wǎng)頁，可以更新局部頁面或數(shù)據(jù)的技術(shù)（異步的發(fā)送接收數(shù)據(jù)，不會(huì)干擾當(dāng)前頁面）。Ajax使瀏覽器和服務(wù)器之間多了一個(gè)Ajax引擎作為中間層。請(qǐng)求服務(wù)器時(shí)，Ajax會(huì)自行判斷哪些數(shù)據(jù)是需要提交到服務(wù)器，哪些不需要。只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)，Ajax引擎才會(huì)向服務(wù)器提交請(qǐng)求，具體過程如圖6-1所示。（1）Ajax工作原理圖6-1Ajax工作原理圖1.Ajax介紹Axios是一個(gè)基于promise的HTTP庫，可以用在瀏覽器和Node.js中。它本身具有以下特征：從瀏覽器中創(chuàng)建XMLHttpRequests、從Node.js創(chuàng)建HTTP請(qǐng)求、支持PromiseAPI、攔截請(qǐng)求和響應(yīng)、轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)、取消請(qǐng)求、自動(dòng)轉(zhuǎn)換Json數(shù)據(jù)。Axios參數(shù)表見表6-1。（2）VUE中的Axios表6-1Axios參數(shù)表參數(shù)類型說明urlString請(qǐng)求的地址methodString請(qǐng)求方式：POST或GET，默認(rèn)GETheadersString設(shè)置請(qǐng)求的header，例如'Content-Type':'application/x-www-form-urlencoded'baseURLString將自動(dòng)加在'url'前面，除非'url'是一個(gè)絕對(duì)URLdataObject或String發(fā)送到服務(wù)器的數(shù)據(jù)，鍵值對(duì)或字符串paramsObject是即將與請(qǐng)求一起發(fā)送的URL參數(shù)，必須是一個(gè)無格式對(duì)象（plainobject）或URLSearchParams對(duì)象transformRequestFunction允許在向服務(wù)器發(fā)送前，修改請(qǐng)求數(shù)據(jù)（請(qǐng)求前處理）只能用在'PUT'、'POST'和'PATCH'這幾個(gè)請(qǐng)求方后面數(shù)組中的函數(shù)必須返回一個(gè)字符串，或ArrayBuffer或StreamthenFunction里是后臺(tái)返回結(jié)果catchFunction里是網(wǎng)絡(luò)錯(cuò)誤或后臺(tái)服務(wù)器出bug等等1.Ajax介紹axios({ method:'post', url:'/user/12345', data:{firstName:'Fred',//參數(shù)firstName lastName:'Flintstone'//參數(shù)lastName } }) .then(function(response){console.log(response);}) .catch(function(error){console.log(error);});代碼示例：1.Ajax介紹JQuery對(duì)Ajax做了大量的封裝，不需要去考慮瀏覽器兼容性，使用起來也較為方便。JQuery對(duì)Ajax一共有3層封裝。最底層為$.ajax()，第二層為.load()、$.get()和$.post()，最高層為$.getScript()和$.getJSON()方法。（3）JQuery中的Ajax表6-2$.Ajax參數(shù)表參數(shù)類型說明urlString請(qǐng)求的地址typeString請(qǐng)求方式POST或GET，默認(rèn)GETdataObject或String發(fā)送到服務(wù)器的數(shù)據(jù)，鍵值對(duì)或字符串dataTypeString從服務(wù)器返回的數(shù)據(jù)類型，比如html、xml、json等successFunction請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，先執(zhí)行success再執(zhí)行completecontentTypeString指定請(qǐng)求內(nèi)容的類型。默認(rèn)為application/x-www-form-urlencoded。asyncBoolean是否異步處理。默認(rèn)為true，false為同步處理1.Ajax介紹$('button').click(function(){$.ajax({type:'post',url:'test',dataType:'json',success:function(data){alert(data);},})});代碼示例：2.Vue的生命周期首先看一下VUE的生命周期：beforeCreate、created、beforeMount、mounted，雖然如圖6-2所示中4個(gè)狀態(tài)是順序執(zhí)行，然而在實(shí)際運(yùn)行過程中這4個(gè)狀態(tài)是同步進(jìn)行的。（1）VUE的生命周期圖6-2VUE生命周期2.Vue的生命周期如圖6-3所示中的代碼及運(yùn)行結(jié)果可以看出生命周期都是同步的，異步都在生命周期之后執(zhí)行。所以得知在任務(wù)6.2中，mounted方法中調(diào)用的drawFailureRatio()方法，如果定義不加async，則調(diào)用該方法時(shí)還沒有獲得后臺(tái)請(qǐng)求的數(shù)據(jù)，因此無法輸出可視化圖表。加了async表示該方法是異步方法，并且在Axios獲取數(shù)據(jù)前加await表示，要執(zhí)行完Axios方法才能執(zhí)行其后的代碼，這樣就保證了顯示圖表前先拿到數(shù)據(jù)。（1）VUE的生命周期圖6-3生命周期示例3.async與awaitasync作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)，因?yàn)閍sync就是異步的意思，異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行，async函數(shù)返回的是一個(gè)promise對(duì)象。await的含義為等待。意思就是代碼需要等待await后面的函數(shù)運(yùn)行完并且有了返回結(jié)果之后，才繼續(xù)執(zhí)行下面的代碼。這正是同步的效果async/await，是一個(gè)用同步的思維來解決異步問題的方案，當(dāng)前端接口調(diào)用需要等到接口返回值以后渲染頁面時(shí)。（1）async與await4.ECharts實(shí)現(xiàn)Web可視化圖表繪制如圖6-4顯示了EChares實(shí)現(xiàn)Web可視化圖表繪制過程，具體詳細(xì)步驟如下：（1）引入ECharts圖標(biāo)庫。在package.json文件中dependencies屬性添加ECharts的依賴。（2）頁面創(chuàng)建DOM容器，見任務(wù)6.1。（3）~（5）初始化ECharts實(shí)例、獲取并配置圖表數(shù)據(jù)、繪制圖表導(dǎo)入DOM容器，詳見任務(wù)6.2至任務(wù)6.5。（1）ECharts實(shí)現(xiàn)Web可視化圖表繪制圖6-4ECharts實(shí)現(xiàn)Web可視化圖表繪制過程任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)本任務(wù)完成研發(fā)與維修統(tǒng)計(jì)分析頁面的頁面布局，為接下來進(jìn)行數(shù)據(jù)可視化展示呈現(xiàn)做好初步準(zhǔn)備。頁面整體布局效果如圖6-5所示。1.任務(wù)描述圖6-5研發(fā)與維修統(tǒng)計(jì)分析頁面布局效果任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)頁面div結(jié)構(gòu)設(shè)計(jì)如圖6-6所示。2.任務(wù)分析圖6-6dataStatistics頁面結(jié)構(gòu)任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)（1）頁面布局新建文件dataStatistics.vue，添加<template></template>標(biāo)簽，<template>中詳細(xì)代碼如下所示：3.任務(wù)實(shí)施任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)（2）設(shè)置查詢框的默認(rèn)數(shù)據(jù)在<template>下面，添加<script></script>，設(shè)置查詢框中的時(shí)間選擇器的默認(rèn)配置，詳細(xì)代碼如下：3.任務(wù)實(shí)施任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)（3）設(shè)置CSS樣式頁面詳細(xì)代碼如下：3.任務(wù)實(shí)施任務(wù)6.1研發(fā)與維修統(tǒng)計(jì)分析頁面設(shè)計(jì)與實(shí)現(xiàn)（4）同步訓(xùn)練實(shí)現(xiàn)研發(fā)與維修單車監(jiān)控頁面，要求有當(dāng)前車輛速度儀表盤監(jiān)控顯示、總電流監(jiān)控顯示、總電壓監(jiān)控顯示、蓄電池溫度監(jiān)控顯示和極值信息顯示。3.任務(wù)實(shí)施任務(wù)6.2新增故障可視化展示任務(wù)6.2新增故障可視化展示新能源車輛的常見故障包括：電池、電機(jī)、發(fā)動(dòng)機(jī)和其他，將后臺(tái)數(shù)據(jù)通過VUE的Axios方法異步獲取，并將數(shù)據(jù)以可視化圖表的方式進(jìn)行呈現(xiàn)。新增故障比例可視化效果如圖6-8所示。1.任務(wù)描述圖6-8新增故障比例可視化效果任務(wù)6.2新增故障可視化展示在本任務(wù)中，“新增故障”包括電池、電機(jī)、發(fā)動(dòng)機(jī)和其他，查看各種故障類型的比例，展示的是其構(gòu)成比例可以選擇用餅圖呈現(xiàn)，實(shí)現(xiàn)過程將分為3個(gè)步驟：（1）在ECharts官網(wǎng)設(shè)計(jì)好餅圖的樣式，可以得到相關(guān)餅圖的Option屬性設(shè)置；（2）分析餅圖的數(shù)據(jù)結(jié)構(gòu)；（3）在頁面中初始化ECharts圖形對(duì)象，通過Axios方法，獲得后臺(tái)的數(shù)據(jù)，并根據(jù)餅圖對(duì)象所需要的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換。2.任務(wù)分析任務(wù)6.2新增故障可視化展示（1）ECharts餅圖樣式的設(shè)計(jì)與實(shí)現(xiàn)通過第5單元對(duì)ECharts的學(xué)習(xí)，設(shè)計(jì)一個(gè)簡(jiǎn)單的ECharts餅圖，其代碼如下：3.任務(wù)實(shí)施option={tooltip:{trigger:'item',textStyle:{color:'#fff'},formatter:"{a}<br/>:{c}(lhfznp7%)"},

任務(wù)6.2新增故障可視化展示3.任務(wù)實(shí)施legend:[{orient:'vertical',left:"60%",y:'center',icon:'rect',textStyle:{color:'#cddafd',fontSize:14,width:207,height:20},padding:[30,0,30,0],itemWidth:10,itemHeight:5,itemGap:20,data:['電池組','電機(jī)','發(fā)動(dòng)機(jī)','其他']},],series:[{type:'pie',radius:['50%','70%'],center:['30%','50%'],data:[{"name":"電池組","value":800},{"name":"電機(jī)","value":586},{"name":"發(fā)動(dòng)機(jī)","value":504},{"name":"其他","value":725}],itemStyle:{normal:{label:{show:false},shadowColor:'#438bff',shadowBlur:20},}}]};任務(wù)6.2新增故障可視化展示（2）分析餅圖的數(shù)據(jù)結(jié)構(gòu)餅圖數(shù)據(jù)包括圖例數(shù)據(jù)和系列數(shù)據(jù)兩類，其中圖例數(shù)據(jù)（legend）的Json數(shù)據(jù)表示故障類型，其結(jié)構(gòu)為：data:['電池組','電機(jī)','發(fā)動(dòng)機(jī)','其他']，是一個(gè)字符串?dāng)?shù)組；系列數(shù)據(jù)表示故障類型和故障數(shù)量，其Json數(shù)據(jù)結(jié)構(gòu)為：data:[{"name":"電池組","value":800},……]，是一個(gè)包含name和value兩個(gè)屬性的對(duì)象的數(shù)組，因此后臺(tái)的數(shù)據(jù)傳遞來之后要按照這兩種數(shù)據(jù)格式要求進(jìn)行處理。（3）將ECharts對(duì)象在網(wǎng)頁中呈現(xiàn)①在<script>的data()中添加ECharts對(duì)象的聲明，代碼如下：exportdefault{data(){ return{ …… echart:null }} 3.任務(wù)實(shí)施圖2-8平臺(tái)架構(gòu)任務(wù)6.2新增故障可視化展示（2）將ECharts對(duì)象在網(wǎng)頁中呈現(xiàn)②在mounted中對(duì)ECharts對(duì)象進(jìn)行初始化。3.任務(wù)實(shí)施1.mounted(){//新增故障比例--餅圖2.this.echart=this.$echarts.init(document.getElementById("failureRatio"));3.this.drawFailureRatio()；}代碼說明：第2行：將id為“failureRatio”的div對(duì)象初始化為ECharts對(duì)象，命名為“echart”；第3行：在mounted中調(diào)用drawFailureRatio（）方法。

任務(wù)6.2新增故障可視化展示③定義方法drawFailureRatio()實(shí)現(xiàn)故障比例圖的渲染和數(shù)據(jù)呈現(xiàn)。3.任務(wù)實(shí)施

1.asyncdrawFailureRatio(){2.varsourcedata=[];3.varlegenddata=[];4.awaitthis.axios('static/json/failureRatio.json').then(res=>{5.vardata=res.data.data26.sourcedata=data;7.for(vari=0;i<data.length;i++){8.legenddata.push(data[i].name)9.}10.}).catch(err=>{11.console.log(err)12.})任務(wù)6.2新增故障可視化展示③定義方法drawFailureRatio()實(shí)現(xiàn)故障比例圖的渲染和數(shù)據(jù)呈現(xiàn)。3.任務(wù)實(shí)施13.letoption={14.tooltip:{15.trigger:'item',16.textStyle:{17.color:'#fff'18.},19.formatter:"{a}<br/>:{c}(znpbbzv%)"20.},21.color:legendColor,22.legend:[{23.orient:'vertical',24.left:"60%",25.y:'center',26.icon:'rect',27.textStyle:{28.color:'#cddafd',29.fontSize:14,30.width:207,31.height:20,32.backgroundColor:{

任務(wù)6.2新增故障可視化展示③定義方法drawFailureRatio()實(shí)現(xiàn)故障比例圖的渲染和數(shù)據(jù)呈現(xiàn)。3.任務(wù)實(shí)施33.image:'/asset/get/s/data-1545016257824-mxLqGjr4z.png',34.},35.},36.padding:[30,0,30,0],37.itemWidth:10,38.itemHeight:5,39.itemGap:20,40.data:legenddata41.},42.],任務(wù)6.2新增故障可視化展示③定義方法drawFailureRatio()實(shí)現(xiàn)故障比例圖的渲染和數(shù)據(jù)呈現(xiàn)。3.任務(wù)實(shí)施43.series:[{44.type:'pie',45.radius:['50%','70%'],46.center:['30%','50%'],47.data:sourcedata,48.itemStyle:{49.normal:{50.label:{51.show:false52.},53.shadowColor:'#438bff',54.shadowBlur:2055.},56.}57.}]58.};59.this.echart.setOption(option);60.},任務(wù)6.2新增故障可視化展示3.任務(wù)實(shí)施代碼說明：第1行：async表示該方法是異步方法，具體詳解見本單元相關(guān)知識(shí)；第2-3行：定義兩個(gè)數(shù)組用于存儲(chǔ)圖例數(shù)據(jù)和圖表數(shù)據(jù)；第4-12行：通過Axios方法從后臺(tái)獲得Json數(shù)據(jù)，并將數(shù)據(jù)處理為餅圖所需要的格式類型，餅圖的數(shù)據(jù)系列數(shù)據(jù)為{name,value}的鍵值對(duì)數(shù)組，而圖例數(shù)據(jù)則是只有“name”的數(shù)組，因此需要處理和轉(zhuǎn)化；第40行：將圖例數(shù)據(jù)賦值給圖例legend的data屬性；第47行：將圖表數(shù)據(jù)賦值給圖表數(shù)據(jù)series的data屬性；第59行：將option對(duì)象賦值給echart對(duì)象。任務(wù)6.2新增故障可視化展示實(shí)現(xiàn)“新增故障數(shù)量”的餅圖，具體效果如圖6-9所示。4.同步訓(xùn)練圖6-9新增故障數(shù)量可視化展示任務(wù)6.3車輛城市分布Top10可視化展示任務(wù)6.3車輛城市分布Top10可視化展示統(tǒng)計(jì)各城市當(dāng)前的車輛數(shù)量，用柱狀圖表示，如圖6-10所示。1.任務(wù)分析圖6-10車輛城市分布Top10可視化效果任務(wù)6.3車輛城市分布Top10可視化展示

在本任務(wù)中，“車輛城市分布Top10”涉及到不同城市的分布統(tǒng)計(jì)和比較，選擇用柱狀圖呈現(xiàn)，實(shí)現(xiàn)過程將分為3個(gè)步驟：（1）在ECharts官網(wǎng)設(shè)計(jì)好柱狀圖的樣式，可以得到相關(guān)柱狀圖的Option屬性設(shè)置；（2）分析柱狀圖的數(shù)據(jù)結(jié)構(gòu)；（3）在頁面中初始化ECharts圖形對(duì)象，通過Axios方法，獲得后臺(tái)的數(shù)據(jù)，并根據(jù)餅圖對(duì)象所需要的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換。2.任務(wù)分析圖2-8平臺(tái)架構(gòu)任務(wù)6.3車輛城市分布Top10可視化展示（1）ECharts柱狀圖樣式的設(shè)計(jì)與實(shí)現(xiàn)通過第5單元對(duì)ECharts的學(xué)習(xí)，設(shè)計(jì)一個(gè)簡(jiǎn)單的ECharts柱狀圖，其主要代碼如下。3.任務(wù)實(shí)施任務(wù)6.3車輛城市分布Top10可視化展示（1）ECharts柱狀圖樣式的設(shè)計(jì)與實(shí)現(xiàn)通過第5單元對(duì)ECharts的學(xué)習(xí)，設(shè)計(jì)一個(gè)簡(jiǎn)單的ECharts柱狀圖，其主要代碼如下。3.任務(wù)實(shí)施任務(wù)6.3車輛城市分布Top10可視化展示（2）分析柱狀圖的數(shù)據(jù)結(jié)構(gòu)3.任務(wù)實(shí)施

柱狀圖數(shù)據(jù)包括橫坐標(biāo)數(shù)據(jù)和系列數(shù)據(jù)兩類，其中橫坐標(biāo)數(shù)據(jù)（xAxis）的Json數(shù)據(jù)表示分布的城市，其結(jié)構(gòu)為data:['蘇州','無錫','南京',……]，是一個(gè)字符串?dāng)?shù)組；系列數(shù)據(jù)表示城市的車輛數(shù)，其Json數(shù)據(jù)結(jié)構(gòu)為data:[112,134,123,……]是一個(gè)和橫坐標(biāo)項(xiàng)目相對(duì)應(yīng)的數(shù)值數(shù)組，因此后臺(tái)的數(shù)據(jù)傳遞來之后要按照這兩種數(shù)據(jù)格式要求進(jìn)行處理。任務(wù)6.3車輛城市分布Top10可視化展示（3）將ECharts對(duì)象在網(wǎng)頁中呈現(xiàn)①在<script>的data()中添加ECharts對(duì)象的聲明，代碼如下。3.任務(wù)實(shí)施exportdefault{data(){ return{ …… echart:null， …… echart4:null }}

任務(wù)6.3車輛城市分布Top10可視化展示（3）將ECharts對(duì)象在網(wǎng)頁中呈現(xiàn)②在mounted中對(duì)ECharts對(duì)象進(jìn)行初始化。3.任務(wù)實(shí)施1.mounted(){//新增故障比例--餅圖2.this.echart=this.$echarts.init(document.getElementById("failureRatio")); ……3.this.echart4=this.$echarts.init(document.getElementById("CityTop"));4.this.drawFailureRatio()； ……5.this.drawCityTop();}代碼說明：第2行：將id為“failureRatio”的div對(duì)象初始化為ECharts對(duì)象，命名為“echart”；第3行：在mounted中調(diào)用drawFailureRatio（）方法。

任務(wù)6.3車輛城市分布Top10可視化展示（3）將ECharts對(duì)象在網(wǎng)頁中呈現(xiàn)③定義方法drawCityTop()實(shí)現(xiàn)車輛城市分布Top10可視化圖的渲染和數(shù)據(jù)呈現(xiàn)。3.任務(wù)實(shí)施任務(wù)6.3車輛城市分布Top10可視化展示3.任務(wù)實(shí)施代碼說明：第1行：async表示該方法是異步方法，在任務(wù)6.2中有相關(guān)講解；第2-3行：定義兩個(gè)數(shù)組用于存儲(chǔ)圖例數(shù)據(jù)和圖表數(shù)據(jù)；第4-10行：通過Axios方法從后臺(tái)獲得Json數(shù)據(jù)，并將數(shù)據(jù)處理為柱狀圖所需要的格式類型，柱狀圖的數(shù)據(jù)系列數(shù)據(jù)為數(shù)值類型的數(shù)組，橫坐標(biāo)數(shù)據(jù)則是字符類型的數(shù)組，在此需要處理和轉(zhuǎn)化；第31行：將xdata賦值給橫坐標(biāo)xAxis的data屬性；第107行：將sdata賦值給圖表數(shù)據(jù)series的data屬性；第112行：將option對(duì)象賦值給echart4對(duì)象。任務(wù)6.3車輛城市分布Top10可視化展示實(shí)現(xiàn)能耗統(tǒng)計(jì)的“箱線圖（boxplot）”，效果如圖6-11所示。4.同步訓(xùn)練圖6-11能耗設(shè)計(jì)箱線圖效果任務(wù)6.4單車總電流監(jiān)控可視化展示任務(wù)6.4單車總電流監(jiān)控可視化展示當(dāng)輸入車牌號(hào)碼單擊“查詢”按鈕時(shí)，顯示當(dāng)前車輛、當(dāng)前時(shí)間的電流實(shí)時(shí)數(shù)據(jù)顯示，要求每5秒刷新一下實(shí)時(shí)信息顯示。效果如圖6-12所示。1.任務(wù)描述圖6-12單車總電流監(jiān)控可視化展示效果任務(wù)6.4單車總電流監(jiān)控可視化展示在本任務(wù)中，“單車總電流監(jiān)控”是基于時(shí)間變化的比較，選擇用曲線圖呈現(xiàn)，實(shí)現(xiàn)過程將分為6個(gè)步驟：（1）在ECharts官網(wǎng)設(shè)計(jì)好曲線圖的樣式，可以得到相關(guān)曲線圖的Option屬性設(shè)置；（2）分析曲線圖的數(shù)據(jù)結(jié)構(gòu)；（3）在頁面中初始化ECharts圖形對(duì)象；（4）編寫方法drawTotalCurrent()，進(jìn)行ECharts對(duì)象的渲染，并在頁面掛載時(shí)調(diào)用；（5）方法totalVoltageCurrent()，通過Axios方法，獲得后臺(tái)的數(shù)據(jù)，并根據(jù)餅圖對(duì)象所需要的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換；（6）編寫search()方法，實(shí)現(xiàn)單擊“查詢”按鈕時(shí)的數(shù)據(jù)呈現(xiàn)。2.任務(wù)分析（1）ECharts3D-柱狀圖樣式的設(shè)計(jì)與實(shí)現(xiàn)3.任務(wù)實(shí)施任務(wù)6.4單車總電流監(jiān)控可視化展示（1）ECharts3D-柱狀圖樣式的設(shè)計(jì)與實(shí)現(xiàn)3.任務(wù)實(shí)施任務(wù)6.4單車總電流監(jiān)控可視化展示注意：曲線圖是折線圖的一種，在series設(shè)置中，要將smooth屬性設(shè)置為true。（2）分析曲線圖的數(shù)據(jù)結(jié)構(gòu)

曲線圖數(shù)據(jù)包括橫坐標(biāo)數(shù)據(jù)和系列數(shù)據(jù)兩類，其中橫坐標(biāo)數(shù)據(jù)（xAxis）表示時(shí)間，其Json數(shù)據(jù)結(jié)構(gòu)為data:["13:00","13:05","13:10",……]，是一個(gè)字符串?dāng)?shù)組；系列數(shù)據(jù)表示電流，其Json數(shù)據(jù)結(jié)構(gòu)為data:[182,191,……]，是一個(gè)和橫坐標(biāo)項(xiàng)目相對(duì)應(yīng)的數(shù)值數(shù)組，因此后臺(tái)的數(shù)據(jù)傳遞來之后要按照這兩種數(shù)據(jù)格式要求進(jìn)行處理。3.任務(wù)實(shí)施任務(wù)6.4單車總電流監(jiān)控可視化展示（3）在頁面中初始化ECharts圖形對(duì)象

在data()方法中聲明一個(gè)變量echart2，用于指向折線圖對(duì)象。3.任務(wù)實(shí)施任務(wù)6.4單車總電流監(jiān)控可視化展示（4）渲染曲線圖對(duì)象echart2

在methods中定義方法drawTotalCurrent()，進(jìn)行ECharts對(duì)象的渲染，并在頁面掛載時(shí)調(diào)用：3.任務(wù)實(shí)施任務(wù)6.4單車總電流監(jiān)控可視化展示在mounted()方法中初始化echart2對(duì)象，調(diào)用drawTotalCurrent()方法。（5）通過Axios方法獲得后臺(tái)的數(shù)據(jù)

在methods中定義方法totalVoltageCurrent()，通過Axios方法，獲得后臺(tái)的數(shù)據(jù)，并根據(jù)餅圖對(duì)象所需要的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換：3.任務(wù)實(shí)施任務(wù)6.4單車總電流監(jiān)控可視化展示代碼說明：第5-10行：將后臺(tái)調(diào)用得到的數(shù)據(jù)賦值給橫坐標(biāo)數(shù)據(jù)和系列數(shù)據(jù)；第15行：每隔5秒調(diào)用一下當(dāng)前方法（totalVoltageCurrent），實(shí)現(xiàn)定時(shí)刷新。（6）編寫search()方法，實(shí)現(xiàn)單擊“查詢”按鈕時(shí)的數(shù)據(jù)呈現(xiàn)。

3.任務(wù)實(shí)施任務(wù)6.4單車總電流監(jiān)控可視化展示代碼說明：第3-5行：當(dāng)窗口大小發(fā)生變化時(shí)，ECharts對(duì)象的大小也隨之發(fā)生自適應(yīng)變化；第6行：調(diào)用totalVoltageCurrent()方法顯示電流數(shù)據(jù)。實(shí)現(xiàn)電壓的實(shí)時(shí)監(jiān)控折線圖，效果如圖6-13所示。同步練習(xí)3圖6-13實(shí)時(shí)電壓折線圖效果任務(wù)6.5單車蓄電池溫度可視化展示任務(wù)6.5單車蓄電池溫度可視化展示當(dāng)輸入車牌號(hào)碼單擊“查詢”按鈕時(shí)，顯示當(dāng)前車輛電池組在不同時(shí)間、不同電池的實(shí)時(shí)溫度數(shù)據(jù)顯示，要求每5秒刷新一下實(shí)時(shí)信息顯示，效果如圖6-14所示。1.任務(wù)描述圖6-14單車蓄電池溫度可視化效果2.任務(wù)分析在本任務(wù)中，“蓄電池溫度”共有3個(gè)維度：時(shí)間、電池和溫度，因此選擇三維的柱狀圖呈現(xiàn)，實(shí)現(xiàn)過程將分為6個(gè)步驟：（1）在ECharts官網(wǎng)設(shè)計(jì)好3D柱狀圖的樣式，可以得到相關(guān)3D柱狀圖的Option屬性設(shè)置；（2）分析3D柱狀圖的數(shù)據(jù)結(jié)構(gòu)；（3）在頁面中初始化ECharts圖形對(duì)象；（4）編寫方法drawBatteryPack()，進(jìn)行ECharts對(duì)象的渲染，并在頁面掛載時(shí)調(diào)用；（5）編寫方法batteryPack()，通過axios方法，獲得后臺(tái)的數(shù)據(jù)，并根據(jù)3D柱狀圖對(duì)象所需要的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換；（6）編寫search()方法，實(shí)現(xiàn)單擊“查詢”按鈕時(shí)的數(shù)據(jù)呈現(xiàn)。任務(wù)6.5單車蓄電池溫度可視化展示（1）ECharts3D-柱狀圖樣式的設(shè)計(jì)與實(shí)現(xiàn)3.任務(wù)實(shí)施任務(wù)6.5單車蓄電池溫度可視化展示（2）分析3D-柱狀圖的數(shù)據(jù)結(jié)構(gòu)

3D-柱狀圖數(shù)據(jù)包括xAxis3D數(shù)據(jù)、yAxis3D數(shù)據(jù)和系列數(shù)據(jù)3類，其中xAxis3D表示時(shí)間，其Json數(shù)據(jù)結(jié)構(gòu)為hours=['1a','2a','3a','4a','5a','6a','7a','8a','9a','10a','11a','12p']，是一個(gè)字符串?dāng)?shù)組；yAxis3D表示電池，其json數(shù)據(jù)結(jié)構(gòu)為：batterys=["電池1","電池2","電池3",……]，也是一個(gè)字符串?dāng)?shù)組；系列數(shù)據(jù)是一個(gè)三元組的數(shù)組，其Json數(shù)據(jù)結(jié)構(gòu)為data=[[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],……]。每天的時(shí)間和電池?cái)?shù)是固定的，只有系列數(shù)據(jù)是變化的，因此后臺(tái)的數(shù)據(jù)傳遞來之后要按照這種三元組數(shù)組的格式要求進(jìn)行處理。