2020年4月

單元1 Web數(shù)據(jù)可視化概述.........1

單元描述.. 1

任務(wù)分解.. 2

知識(shí)要點(diǎn).. 2

1. 數(shù)據(jù)可視化 .... 2

2. Web 數(shù)據(jù)可視化類(lèi)型及方法 ...... 2

3. Web 數(shù)據(jù)可視化相關(guān)技術(shù) .......... 3

任務(wù)1.1 認(rèn)識(shí)Web 前端開(kāi)發(fā).............. 4

任務(wù)1.2 認(rèn)識(shí)Web 數(shù)據(jù)可視化應(yīng)用案例........... 5

單元小結(jié).. 6

課后練習(xí).. 6

單元2 新能源汽車(chē)大數(shù)據(jù)可視化監(jiān)測(cè)平臺(tái)..............7

單元描述.. 7

任務(wù)分解.. 8

知識(shí)要點(diǎn).. 8

1. 新能源汽車(chē)基礎(chǔ) ........... 8

2. 車(chē)輛數(shù)據(jù)與存儲(chǔ) ........... 9

3. 前端框架數(shù)據(jù)驅(qū)動(dòng)模式 ............. 10

任務(wù)2.1 理解新能源汽車(chē)遠(yuǎn)程監(jiān)測(cè)業(yè)務(wù)........... 11

任務(wù)2.2 理解業(yè)務(wù)數(shù)據(jù)...... 13

任務(wù)2.3 確定車(chē)輛數(shù)據(jù)模型.............. 15

單元小結(jié) 16

課后練習(xí) 16

單元3 Web基礎(chǔ)............17

單元描述 17

任務(wù)分解 18

知識(shí)要點(diǎn) 18

1. 前端開(kāi)發(fā)常用工具介紹............. 18

2. HTML+CSS 基礎(chǔ)........ 19

3. 網(wǎng)頁(yè)中的JavaScript... 23

任務(wù)3.1 搭建開(kāi)發(fā)環(huán)境...... 25

任務(wù)3.2 創(chuàng)建新能源汽車(chē)單車(chē)監(jiān)控頁(yè)面........... 28

任務(wù)3.3 呈現(xiàn)車(chē)輛運(yùn)行狀態(tài).............. 38

單元小結(jié) 43

課后練習(xí) 43

單元4 前端框架45

單元描述 45

任務(wù)分解 47

知識(shí)要點(diǎn) 47

1. 前端框架簡(jiǎn)介............. 47

2. Vue.js 安裝... 49

3. webpack 構(gòu)建項(xiàng)目 ...... 51

4. Vue.js 基礎(chǔ)... 53

5. 常用插件...... 63

任務(wù)4.1 搭建Vue 開(kāi)發(fā)環(huán)境............. 66

任務(wù)4.2 新能源汽車(chē)大數(shù)據(jù)分析系統(tǒng)路由與組件設(shè)計(jì).... 80

任務(wù)4.3 新能源汽車(chē)大數(shù)據(jù)分析系統(tǒng)用戶(hù)管理頁(yè)面實(shí)現(xiàn). 94

任務(wù)4.4 新能源汽車(chē)大數(shù)據(jù)分析系統(tǒng)動(dòng)態(tài)頁(yè)面實(shí)現(xiàn)...... 108

單元小結(jié) ............. 113

課后練習(xí) ............. 113

單元5 數(shù)據(jù)可視化設(shè)計(jì)基礎(chǔ).....114

單元描述............. 114

任務(wù)分解............. 115

知識(shí)要點(diǎn)............. 115

1. 有效可視化創(chuàng)建步驟 .115

2. 常用可視化工具 ....... 122

3. ECharts 基礎(chǔ) ............. 123

4. D3 基礎(chǔ) ..... 128

任務(wù)5.1 認(rèn)識(shí)數(shù)據(jù)可視化 130

任務(wù)5.2 使用ECharts 實(shí)現(xiàn)車(chē)輛數(shù)據(jù)可視化. 133

任務(wù)5.3 使用D3 完成車(chē)輛實(shí)時(shí)監(jiān)控可視化.. 138

單元小結(jié)............. 143

課后練習(xí)............. 143

單元6 數(shù)據(jù)可視化整合............ 144

單元描述............. 145

任務(wù)分解............. 145

知識(shí)要點(diǎn)............. 146

1. Ajax 介紹 ... 146

2. VUE 的生命周期 ...... 148

3. async 與await ........... 149

4. ECharts 實(shí)現(xiàn)Web 可視化圖表繪制....... 150

任務(wù)6.1 研發(fā)與維修統(tǒng)計(jì)分析頁(yè)面設(shè)計(jì)與實(shí)現(xiàn)............. 150

任務(wù)6.2 新增故障比例可視化展示. 154

任務(wù)6.3 車(chē)輛城市分布Top10 可視化展示.... 158

任務(wù)6.4 單車(chē)總電流監(jiān)控可視化展示............ 163

任務(wù)6.5 單車(chē)蓄電池溫度可視化展示............ 168

單元小結(jié)............. 173

課后練習(xí)............. 173

單元7 新能源汽車(chē)數(shù)據(jù)大屏......175

單元描述 .............175

任務(wù)分解 .............176

知識(shí)要點(diǎn) .............176

1. 大屏設(shè)計(jì)的步驟 ....... 176

2. 大屏布局 .... 177

3. 大屏設(shè)計(jì)技巧 ........... 178

任務(wù)7.1 建立數(shù)據(jù)分析維度.............179

任務(wù)7.2 實(shí)現(xiàn)大屏布局.....180

任務(wù)7.3 數(shù)據(jù)大屏實(shí)現(xiàn).....182

單元小結(jié)..............199

課后練習(xí)..............199

參考文獻(xiàn) .200